Цвет фона горизонтальной навигации останавливается на полпути

Question

Несмотря на то, что я добавил ширину 100%, цвет фона навигации останавливается, когда ссылки заканчиваются. Css3, кажется, намного сложнее сделать это на старой версии cSS2. Я не знаю, что делать дальше, кто-нибудь может помочь PLS, не выбивая меню?

          ``` /* header */
.nav {background-color:#3333FF; position: relative; top: 0; left: 3px; color: #fff; width: 100%;}
.nav ul {margin: 0; padding: 0; list-style: none;}
.nav li a {line-height: 40px; height: 40px; font-size: 18px; display: block; background-color:#3333FF; color: #fff; padding: 10px; text-decoration: none;}
.nav li a:hover, .nav .menu-btn:hover {background-color: #0000EE;}
/* menu */
.nav .menu {max-height: 0; display: inline-block; transition: max-height .2s ease-out;}
/* menu icon */
.nav .menu-icon {cursor: pointer; float: right; padding: 28px 20px; position: relative;}
.nav .menu-icon .nav-icon {background: #fff; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 18px;}
.nav .menu-icon .nav-icon:before, .nav .menu-icon .nav-icon:after {background: #fff; content: ''; display: block; height: 100%; transition: all .2s ease-out; width: 100%;}
.nav .menu-icon .nav-icon:before {top: 5px;}
.nav .menu-icon .nav-icon:after {top: -5px;}/* menu btn */
.nav .menu-btn {display: none;}
.nav .menu-btn:checked ~ .menu {max-height: 420px;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon {background: transparent;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:before {transform: rotate(-45deg); top:0;}
.nav .menu-btn:checked ~ .menu-icon .nav-icon:after {transform: rotate(45deg); top:0;}
@media (min-width: 48em) {.nav li {float: left;}
.nav li a {padding: 15px 15px;}
.nav .menu {clear: none; float: left; max-height: none; max-width: 100%;}
.nav .menu-icon {display: none;}
@media screen ony (max-width: 500px;) {
.wide ul li {height: auto; width: 100%;} 
.container ul li {width: 40%;} 
h1 span {display: none;} 
#main, #firstside, #second .container, .block, firstsidewider {width: 100%;}
.gcse-search {width:90%;}}

Вот некоторые HTML

      ```

<header id="banner"><div class="nav"><input class="menu-btn" type="checkbox" id="menu-btn" /><label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label><ul class="menu"><li><a href="http://index.html">Home</a></li><li><a href="http://news.html">News</a></li><li><a href="http://contact.html">Contacts</a></li><li><a href="http://policies.html">Policies</a></li>
<li><a href="http://members.html">Members</a></li><li><a href="http://volunteer.html">Volunteer</a></li>
<li><a href="http://links.html">Links</a></li></ul></div>

Answer 1

Дело в том, что вы добавили

@media (min-width: 48em) {
    ul {
        float: left;
    }
}

Это не позволило навигационной панели занять всю ширину, потому что ее дочерний элемент был плавающим. Вы можете прочитать больше здесь

Вы можете удалить float, и это сработает, или вы можете сделать это

.nav {
    position: absolute;
}

или

.nav {
    position: fixed;
}

ЧитатьПодробнее о плавающих элементах здесь

Также. Один совет. При использовании @media-query используйте px для ширины и высоты экрана. Я считаю, что так работает лучше всего. Кто-то, пожалуйста, поправьте меня, если я ошибаюсь

Надеюсь, это помогло:)

Счастливое кодирование

ОБНОВЛЕНИЕ

В следующий раз, пожалуйста, напишитеCodePen или JSFiddle код. Всем будет легче помочь:)