无法在响应式菜单中将边距设置为零

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