0
今私が持っているのは、#nav-barの背景色は、すべての上端（直感的には100％の幅）で表示したい左側には表示されません。私はwidthを100％と指定していましたが、それはまさに私が望む幅のサイズですが、背景色が画像の右側に白いスペースしかないところに移動したようです。それは最初にテキストがあり、私が述べた右端に終わる中間で始まり、余分な空白があります。メニューの背景色は、画像の中心から始まるのはなぜですか？すべてではありません。
body {
margin: 0;
border: 0;
}
#container {
position: relative;
}
h1 {
position: absolute;
font-size: 90px;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
img {
width: 100%;
height: 1000px;
margin: -287px -100px 0px 0px;
}
#nav-bar {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 38px;
top: 0;
left: 31%;
word-spacing: 30px;
}
#nav-bar {
width: 100%;
height: 70px;
background-color: black;
}
#nav-bar {
opacity: .30;
filter: (opacity=30);
}
li {
display: inline;
color: white;
}
li a {
text-decoration: none;
}
li a:hover {
opacity: 0.5;
}<body>
<div id="container">
<img src="...">
<h1>IndieForwardMusic</h1>
<ul id="nav-bar">
<li id="li-1">Home</li>
<li id="li-2">About</li>
<li id="li-3">
<a href="..."></a>
</li>
<li id="li-4">Contact</li>
</ul>
</div>
</body>