Can't set margins to zero in a responsive menu - css

Question

I tried to make a responsive header for my website, it's all ok, but i can not set the margins of the links to 0. You cand see in the image: https://imgur.com/s5EzL6n
What i want to achieve is to make all that grey background 100% width.
I followed this youtube video: https://www.youtube.com/watch?v=lYw-FE60Dws
I probably set some things wrong, i am sure, but i am a beginner.
HTML:
<header>
<div class="container">
<div id="branding">
<img src="logo.png">
<a class="toggle">Meniu</a>
</div>
<nav>
<ul class="active">
<li class="current">Acasă</li>
<li>Despre</li>
<li>Servicii</li>
<li>Proiecte</li>
<li>Contact</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

there is a default padding for ul, you have to remove it when you don't need it. Just add 0px to the ul and you will have a 100% div
Try to use css box models to solve such cases
https://www.youtube.com/watch?v=xF0dhepbzD8