使导航栏元素的宽度相等，距离彼此相等

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;
}

屏幕左侧与“Home”元素左侧之间的距离以及屏幕右侧与“Contact Us”元素右侧之间的距离不同。我希望它们相等，以便导航栏看起来不错。我真的不确定如何编辑css来实现这一目标。

Answer 1

这对你有用吗？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;