导航栏html两侧的空白区域

Question

我是第一次创建导航栏的新手。我遇到的问题是，酒吧两侧都有（不同程度）的白色空间。我做了一个快速的模拟和屏幕截图来显示我的意思：Image

在过去的几个小时里，我花了很多时间来处理类似且有时相同的问题，但我尝试过的解决方案都没有奏效。

我的代码如下：

#navbar {
  margin: 0px;
  padding: 0px;
  width: auto;
}
#navbar ul {
  background-color: #FAFAD2;
}
#navbar li {
  float: left;
  width: 20%;
  text-align: center;
  display: table-cell;
  background-color: #FAFAD2;
}
#navbar li a {
  display: block;
  color: #4682B4;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#navbar li a:hover:not(.active) {
  background-color: #FAF0E6;
}
#navbar .active {
  background-color: #FAFAD2;
}
#header {
  width: 100%;
  text-align: center;
  position: relative;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

<div id="header">
  <h1>Reserved</h1>
</div>
<div id="navbar">
  <ul>
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href=“#Experience”>Experience</a>
    </li>
    <li><a href=“#Consulting Services“>Consulting Services</a>
    </li>
    <li><a href=“#Contact”>Contact</a>
    </li>
    <li><a href=“#About”>About</a>
    </li>
  </ul>
</div>

非常感谢任何帮助！ 此外，对于此帖子的任何格式问题感到抱歉！

Answer 1

重置您的无序列表上的保证金，如下所示：

#navbar ul {
    background-color: #FAFAD2;
    margin-left: -40px; /*solution 1 */
    padding:0; /*solution 2 */
}

除非您使用重置css或某个框架来提供UL具体说明，否则您可以预期浏览器的说明会被默认。在这种情况下（Chrome），浏览器用户代理会添加40px的保证金开始。你已经补偿它以使它无效。

Lister先生的解决方案2也有效。但是，在以后的另一场比赛中，你仍然需要处理那些40px。我宁愿缩小我的UL，我想要的，而不是浏览器认为最好的;）

见图片

MOst CSS框架（Bootstrap，Foundation等）或reset.CSS和Modifyer.CSS考虑了这一重置。

查看已解决的DEMO

Answer 2

您也可以通过移除<li>

上的浮动来解决此问题

#navbar li {
  width: 20%;
  text-align: center;
  display: table-cell;
  background-color: #FAFAD2;
}

工作示例： https://fiddle.jshell.net/8cbhvj6o/

Answer 3

我认为你这个和平的css

#navbar {margin: 0px; padding: 0px; width: 100%; }

对于您网站顶部的菜单使用 posistion：固定;在旅游#navbar