Проблема с панелью в css

@charset "UTF-8"; 
.nav { 
  width: 500px; 
  min-width: 500px; 
  /* фиксируем и выставляем высоту панели на максимум */ 
  height: 100%; 
  position: fixed; 
  top: 0; 
  bottom: 0; 
  margin: 0; 
  /* сдвигаем (прячем) панель относительно правого края страницы */ 
  right: -500px; 
  /* внутренние отступы */ 
  padding: 15px 20px; 
  /* плавный переход смещения панели */ 
  -webkit-transition: right 0.3s; 
  -moz-transition: right 0.3s; 
  transition: right 0.3s; 
  /* определяем цвет фона панели */ 
  background: #16a085; 
  /* поверх других элементов */ 
  z-index: 2000; 
} 
 
.nav-toggle { 
  /* абсолютно позиционируем */ 
  position: absolute; 
  /* относительно правого края панели */ 
  right: 500px; 
  /* отступ от верхнего края панели */ 
  top: 3em; 
  /* внутренние отступы */ 
  padding: 0.5em; 
  background: inherit; 
  /* цвет текста */ 
  color: #dadada; 
  /* вид курсора */ 
  cursor: pointer; 
  /* размер шрифта */ 
  font-size: 1.2em; 
  line-height: 1; 
  /* всегда поверх других элементов страницы */ 
  z-index: 2001; 
  /* анимируем цвет текста при наведении */ 
  -webkit-transition: color .25s ease-in-out; 
  -moz-transition: color .25s ease-in-out; 
  transition: color .25s ease-in-out; 
  box-shadow: 0 0 21px 5px black; 
} 
 
.nav-toggle:after { 
  content: '\2630'; 
  text-decoration: none; 
} 
 
 
/* цвет текста при наведении */ 
 
.nav-toggle:hover { 
  color: #f4f4f4; 
} 
 
[id='nav-toggle'] { 
  position: absolute; 
  display: none; 
} 
 
[id='nav-toggle']:checked~.nav>.nav-toggle { 
  left: auto; 
  right: 2px; 
  top: 1em; 
} 
 
[id='nav-toggle']:checked~.nav { 
  right: 0; 
  box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.5); 
  -moz-box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.5); 
  -webkit-box-shadow: -4px 0px 20px 0px rgba(0, 0, 0, 0.5); 
  overflow-y: auto; 
} 
 
[id='nav-toggle']:checked~main>article { 
  -webkit-transform: translateX(-500px); 
  -moz-transform: translateX(-500px); 
  transform: translateX(-500px); 
} 
 
[id='nav-toggle']:checked~.nav>.nav-toggle:after { 
  content: '\2715'; 
} 
 
body { 
  -webkit-animation: bugfix infinite 1s; 
} 
 
@-webkit-keyframes bugfix { 
  to { 
    padding: 0; 
  } 
} 
 
@media screen and (min-width: 500px) { 
  html, 
  body { 
    margin: 0; 
    overflow-x: hidden; 
  } 
} 
 
@media screen and (max-width: 500px) { 
  html, 
  body { 
    margin: 0; 
    overflow-x: hidden; 
  } 
  .nav { 
    width: 100%; 
    box-shadow: none 
  } 
} 
 
 
/** 
 * Формируем стиль заголовка (логотип) панели  
*/ 
 
.nav h2 { 
  width: 90%; 
  padding: 0; 
  margin: 10px 0; 
  text-align: center; 
  text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px; 
  font-size: 1.3em; 
  line-height: 1.3em; 
  opacity: 0; 
  transform: scale(0.1, 0.1); 
  -ms-transform: scale(0.1, 0.1); 
  -moz-transform: scale(0.1, 0.1); 
  -webkit-transform: scale(0.1, 0.1); 
  transform-origin: 0% 0%; 
  -ms-transform-origin: 0% 0%; 
  -moz-transform-origin: 0% 0%; 
  -webkit-transform-origin: 0% 0%; 
  transition: opacity 0.8s, transform 0.8s; 
  -ms-transition: opacity 0.8s, -ms-transform 0.8s; 
  -moz-transition: opacity 0.8s, -moz-transform 0.8s; 
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; 
} 
 
.nav h2 a { 
  color: #dadada; 
  text-decoration: none; 
  text-transform: uppercase; 
} 
 
 
/*плавное появление заголовка (логотипа) при раскрытии панели */ 
 
[id='nav-toggle']:checked~.nav h2 { 
  opacity: 1; 
  transform: scale(1, 1); 
  -ms-transform: scale(1, 1); 
  -moz-transform: scale(1, 1); 
  -webkit-transform: scale(1, 1); 
} 
 
.nav>ul { 
  display: block; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
.nav>ul>li { 
  line-height: 2.5; 
  opacity: 0; 
  -webkit-transform: translateX(50%); 
  -moz-transform: translateX(50%); 
  -ms-transform: translateX(50%); 
  transform: translateX(50%); 
  -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s; 
  -moz-transition: opacity .5s .1s, -moz-transform .5s .1s; 
  -ms-transition: opacity .5s .1s, -ms-transform .5s .1s; 
  transition: opacity .5s .1s, transform .5s .1s; 
} 
 
[id='nav-toggle']:checked~.nav>ul>li { 
  opacity: 1; 
  -webkit-transform: translateX(0); 
  -moz-transform: translateX(0); 
  -ms-transform: translateX(0); 
  transform: translateX(0); 
} 
 
 
/* определяем интервалы появления пунктов меню */ 
 
.nav>ul>li:nth-child(2) { 
  -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; 
  transition: opacity .5s .2s, transform .5s .2s; 
} 
 
.nav>ul>li:nth-child(3) { 
  -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s; 
  transition: opacity .5s .3s, transform .5s .3s; 
} 
 
.nav>ul>li:nth-child(4) { 
  -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s; 
  transition: opacity .5s .4s, transform .5s .4s; 
} 
 
.nav>ul>li:nth-child(5) { 
  -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s; 
  transition: opacity .5s .5s, transform .5s .5s; 
} 
 
.nav>ul>li:nth-child(6) { 
  -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s; 
  transition: opacity .5s .6s, transform .5s .6s; 
} 
 
.nav>ul>li:nth-child(7) { 
  -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s; 
  transition: opacity .5s .7s, transform .5s .7s; 
} 
 
 
/** 
 * оформление ссылок пунктов меню 
 */ 
 
.nav>ul>li>a { 
  display: inline-block; 
  position: relative; 
  padding: 0; 
  font-family: 'Open Sans', sans-serif; 
  font-weight: 300; 
  font-size: 1.2em; 
  color: #dadada; 
  width: 100%; 
  text-decoration: none; 
  /* плавный переход */ 
  -webkit-transition: color .5s ease, padding .5s ease; 
  -moz-transition: color .5s ease, padding .5s ease; 
  transition: color .5s ease, padding .5s ease; 
} 
 
 
/** 
 * состояние ссылок меню при наведении 
 */ 
 
.nav>ul>li>a:hover, 
.nav>ul>li>a:focus { 
  color: white; 
  padding-left: 15px; 
} 
 
 
/** 
 * линия подчеркивания ссылок меню 
 */ 
 
.nav>ul>li>a:before { 
  content: ''; 
  display: block; 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  height: 1px; 
  width: 100%; 
  -webkit-transition: width 0s ease; 
  transition: width 0s ease; 
} 
 
.nav>ul>li>a:after { 
  content: ''; 
  display: block; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  height: 1px; 
  width: 100%; 
  background: #3bc1a0; 
  -webkit-transition: width .5s ease; 
  transition: width .5s ease; 
} 
 
 
/** 
 * анимируем линию подчеркивания  
 * ссылок при наведении 
 */ 
 
.nav>ul>li>b:hover:before { 
  width: 0%; 
  background: #3bc1a0; 
  -webkit-transition: width .5s ease; 
  transition: width .5s ease; 
} 
 
.nav>ul>li>a:hover:after { 
  width: 0%; 
  background: transparent; 
  -webkit-transition: width 0s ease; 
  transition: width 0s ease; 
} 
 
.mask-content { 
  display: block; 
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 1000; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.4); 
  visibility: hidden; 
  opacity: 0; 
} 
 
[id='nav-toggle']:checked~.mask-content { 
  visibility: visible; 
  opacity: 1; 
  -webkit-transition: opacity .5s, visibility .5s; 
  transition: opacity .5s, visibility .5s; 
}

<input type="checkbox" id="nav-toggle" hidden> 
 
<nav class="nav"> 
 
  <label for="nav-toggle" class="nav-toggle" onclick></label> 
 
  <h2 class="logo"></h2> 
  <ul> 
    <li> 
      <h3>Новости</h3> 
      <li><a href="https://habr.com/company/spbifmo/blog/426347">Уязвимость в PlayStation 4 — набор символов в сообщении для пользователя удаленно превращает приставку в почти «кирпич»</a> 
        <li><a href="https://habr.com/post/426317">1155 vs 2011. В бой идут одни старики</a> 
          <li><a href="https://habr.com/post/426333">Microsoft выпустил код MS-DOS 1.25 и 2.0 под лицензией MIT</a> 
            <li><a href="https://habr.com/post/426303">Краткий экскурс по основным моментам Zend Framework</a> 
              <li><a href="https://habr.com/company/1cloud/blog/426335/">«Марсианская технология»: почему дата-центры переходят на топливные ячейки</a> 
  </ul> 
</nav>