html点导航栏右边显示不出来,导航栏任一侧的空白html

我对编写html非常陌生，并且正在尝试首次创建导航栏。我遇到的问题是酒吧两侧都有(不同程度)的空白空间。我已经做了一个快速模拟和屏幕快照，以显示我的意思：Image导航栏任一侧的空白html

我花了很多时间在过去几个小时通过类似的问题，有时相同的问题，但没有解决方案我尝试过工作。

我的代码如下：

#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%;

}

Reserved

• Home
• Experience
• Consulting Services
• Contact
• About

任何帮助将不胜感激！

此外，对于这篇文章的任何格式问题抱歉！

+0

没有看到你的演示代码中复制：https：//jsfiddle.net/jmarikle/40fcfrfw/ –

+0

这将是ul的填充。给它“填充：0”，你就完成了。 –

+0

或者，将背景颜色从'ul'移动到'＃navbar'。 –