navbar要素の幅と等距離を同じにする

Question

私はまだhtmlとcssで苦労しています。あなたはこのフィドルを見てみる場合：https://jsfiddle.net/cvunmo2n/

HTML：

<div class="headerBar"> 

</div> <!-- end headerBar --> 

<ul class="menu"> 
     <li><a href="#" accesskey="h">Home</a></li> 
     <li><a href="#">Events</a></li> 
     <li><a href="#" accesskey="o">Past Events</a></li> 
     <li><a href="#" accesskey="c">About Us</a></li> 
     <li><a href="#" accesskey="a">Contact Us</a></li> 
    </ul> 

CSS：

#wrapper{ 
width:960px; 
margin:0 auto; 
} 

body{ 
margin: 0px; 
background-color: #a0c4ff; 

} 

.headerBar{ 
display: block; 
width: 100%; 
height: 100px; 
background-color: rgba(0, 0, 0, 0.25); 
margin-bottom: 0px; 
} 

.headerBar #logo{ 
display: inline-block; 
margin-top: 12.5px; 
margin-bottom: 0px; 
} 

.menu { 
margin-top: 0px; 
background-color: rgba(0, 0, 0, 0.25); 
text-align: justify; 
min-width: 500px; 
height: 30px; 
font-family: Opensans; 
} 

.menu:after { 
content: ''; 
display: inline-block; 
width: 100%; 
} 

.menu li { 
display: inline-block; 
} 

.menu a{ 
text-decoration: none; 
color: black; 
padding-right: 10px; 
padding-left: 10px; 
} 

左画面の側面との間の距離「ホーム」要素の左側と、画面の右側と右端との間の距離「Contact Us」要素のt側が異なっています。私はそれらがnavbarが悪く見えないように平等であることを望みます。私は本当にこれを実現するためにCSSを編集する方法がわかりません。

Answer 1

これは機能しますか？

#wrapper{ 
 
width:960px; 
 
margin:0 auto; 
 
} 
 

 
body{ 
 
margin: 0px; 
 
background-color: #a0c4ff; 
 

 
} 
 

 
.headerBar{ 
 
display: block; 
 
width: 100%; 
 
height: 100px; 
 
background-color: rgba(0, 0, 0, 0.25); 
 
margin-bottom: 0px; 
 
} 
 

 
.headerBar #logo{ 
 
display: inline-block; 
 
margin-top: 12.5px; 
 
margin-bottom: 0px; 
 
} 
 

 
.menu { 
 
background-color: rgba(0, 0, 0, 0.25); 
 
text-align: justify; 
 
min-width: 500px; 
 
height: 30px; 
 
font-family: Opensans; 
 
list-style-type: none; 
 
padding: 0; 
 
margin: 0; 
 
display: flex; 
 
justify-content: space-around; 
 
} 
 

 
.menu a{ 
 
text-decoration: none; 
 
color: black; 
 
}

<div class="headerBar"> 
 

 
</div> <!-- end headerBar --> 
 

 
<ul class="menu"> 
 
     <li><a href="#" accesskey="h">Home</a></li> 
 
     <li><a href="#">Events</a></li> 
 
     <li><a href="#" accesskey="o">Past Events</a></li> 
 
     <li><a href="#" accesskey="c">About Us</a></li> 
 
     <li><a href="#" accesskey="a">Contact Us</a></li> 
 
    </ul>