我试图制作一个导航栏，但遇到了悬停问题。只有内容框会改变颜色，但我希望它是内容框和它周围的填充区域。发生了什么？
我试过所有的东西，但由于某种原因，只有内容框发生了变化，这看起来很糟糕。我正在试着换一个满盒子的颜色。我觉得自己像个白痴，有人能看穿这件事，告诉我我做错了什么吗？
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
padding: 20px 20px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number"><a href="#">(360)679-4444</a></li>
</ul>
</nav>我已经将填充从li移动到a
参见工作代码：
#container {
box-sizing: content-box;
}
body {
font-family: "avenir light", sans-serif;
}
#container{
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.navbar-links {
max-width: 1090px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.navbar-links a:hover {
background: #831517;
color: #FFFFFF;
}
.navbar-links a {
color: #444444;
text-decoration: none;
text-align: center;
padding: 20px;
}
.navbar ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-decoration: none;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
margin-top: 50px;
}
.navbar {
background-color: #FFFFFF;
overflow: hidden;
height: 91px;
}
#number {
float: right;
padding-right: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-links">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number"><a href="#">(360)679-4444</a></li>
</ul>
</nav>