Не удается установить поля на ноль в адаптивном меню

Question

Я попытался создать адаптивный заголовок для моего сайта, все в порядке, но я не могу установить поля для ссылок на 0. Вы видите на изображении: https://imgur.com/s5EzL6n

Что я хочудобиться - сделать весь этот серый фон 100% шириной.

Я следил за этим видео на YouTube: https://www.youtube.com/watch?v=lYw-FE60Dws

Возможно, я ошибся в некоторых вещах, я уверен, но я новичок.

HTML:

<header>
    <div class="container">
        <div id="branding">
            <a href="index.html"><img src="logo.png"></a>
            <a class="toggle">Meniu</a>
        </div>
        <nav>
            <ul class="active">
                <li class="current"><a href="index.html">Acasă</a></li>
                <li><a href="despre.html">Despre</a></li>
                <li><a href="servicii.html">Servicii</a></li>
                <li><a href="proiecte.html">Proiecte</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>

    </div>
</header>

CSS:

    /* responsive header*/

.toggle{
    display: none;
    position: absolute;
    right: 10px;
    top: 26px;
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
}

@media (max-width: 940px){

    .toggle{
        display: block;
    }

    header .toggle{
        padding: 0 0;
        font-size: 18px;
    }

    header ul li{
        display: block;
        width: 100%;
        background-color: grey;
    }

    header ul.active{
        display: block;
    }

    header ul li a{
        display: block;
        text-align: center;
    }

    header nav{
        margin: 0;
        width: 100%;
    }

    header ul li{
        width: 100%;
    }

}

/*normal page*/
header a{
    color: #fcfcfc;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    padding-right: 25px;
}


header li{
    float: left;
    display: inline;
    padding: 0 20px 0px 20px;
}

header #branding{
    float: left;
    height: 90px;
    margin-left: 35px;
}  

header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}

Answer 1

для ul есть заданный по умолчанию отступ, вы должны удалить его, когда он вам не нужен.Просто добавьте 0px к ul, и вы получите 100% div. Попробуйте использовать модели css box для решения таких случаев https://www.youtube.com/watch?v=xF0dhepbzD8