我的导航栏拒绝以移动设备为中心

/* CSS Reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
    background-color: #CA3B1F;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* Navigation */

header {
    background-color: #35424a;
    min-height: 70px;
}
.logo {
    color: white;
    font-size: 2.5em;
    float: left;
    margin-top: 15px;
    margin-left: 1em;
}
.highlight {
    color: orange;
}
.navlist li a {
    text-decoration: none;
    color: white;
    font-size: 1.5em;
}
.navlist li {
    display: inline;
    float: right;
    margin-top: 25px;
    margin-right: 4em;
    padding-right: 2em;
}
.current {
    color: orange;
}
.herobox {
    background: url(../Images/sushi.jpg) no-repeat bottom center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px;
    font-size: 30px;
    color: white;
    text-align: center;
}
.hboxhead {
    padding-top: 2em;
    font-size: 2em;
    padding-bottom: 1em;
}
.hboxp {
    font-size: 24px;
}
/* Style the container with a rounded border, grey background and some padding and margin */

.box {
    border: 5px solid grey;
    background-color: #35424a;
    color: white;
    border-radius: 5px;
    padding: 16px;
    margin: 16px 0;
}
/* Clear floats after containers */

.box::after {
    content: "";
    clear: both;
    display: table;
}
/* Float images inside the container to the left. Add a right margin, and style the image as a circle */

.box img {
    float: left;
    margin-right: 20px;
    border-radius: 50%;
    width: 10%;
}
/* Increase the font-size of a span element */

.box span {
    font-size: 20px;
    margin-right: 15px;
}
/* Add media queries for responsiveness. This will center both the text and the image inside the container */

@media (max-width: 500px) {
    .box {
        text-align: center;
    }
    .box img {
        margin: auto;
        float: none;
        display: block;
    }
}
.black {
    background-color: #191919;
    padding-top: 1em;
}
#whyus {
    padding: 1em;
    text-align: center;
    font-size: 24px;
    color: white;
    font-weight: 100;
}
.line {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.center {
    text-align: center;
}
.margin {
    margin-left: 5em;
    margin-right: 5em;
}
.grey {
    color: #A9A9A9;
    font-size: 1.1em;
}
.price {
    display: inline;
    position: relative;
    bottom: 25px;
    margin-left: 2em;
    color: white;
}
.left {
    margin-right: 60%;
    margin-top: 1em;
    color: #A9A9A9;
    font-size: 18px;
}
.sushipic {
    float: right;
    margin: 20px;
    margin-top: 130px;
}
.menu-icon {
    display: hidden;
    width: 40px;
    height: 40px;
}
/* Media Queries */

@media(max-width: 888px) {
    .logo {
        text-align: center;
        width: 100%;
        position: relative;
        bottom: 15px;
        margin-left: 0;
    }
    .navlist li {
        float: none;
        margin-right: 0;
        margin-right: 2em;
        margin-left: 2em;
    }
    .navlist {
        text-align: center;
    }
}

<header>
    <h1 class="logo">Sushi<span class="highlight">Go</span></h1>
    <nav class="navbar">
        <a href="#" class="menu-icon"></a>
        <ul class="navlist">
            <li><a href="about.html" class="about">About</a>
            </li>
            <li><a href="menu.html" class="menu">Menu</a>
            </li>
            <li><a href="index.html" class="home"><span class="current">Home</span></a>
            </li>
        </ul>
    </nav>
</header>
<section class="herobox">
    <h2 class="hboxhead">Providing top-notch sushi in Los Angeles.</h2>
    <p class="hboxp">&nbsp;&nbsp;&nbsp;SushiGo is a sushi restaurant in Los Angeles focused around
        <br>&nbsp;&nbsp;&nbsp;providing the customer with a premium experience.</p>
</section>
<div class="box">
    <img src="Images/Lauren.png" alt="Picture of Lauren">
    <p><span>Lauren Gerstmann.</span>
        <br> World Traveler</p>
    <br>
    <p class="review">SushiGo is the best sushi restaurant I've ever been to! The moment I entered, I was greeted by the staff and immediately
        seated. I ordered at a very reasonable price, and the food came within 5 minutes. Everyone was nice, there were no
        problems, and the food was the best sushi I've ever had. Definitely going to come back!</p>
</div>
<div class="box">
    <img src="Images/daniel.jpg" alt="Picture of Lauren">
    <p><span>Daniel Radcliffe.</span>
        <br>Reporter for Food Insider</p>
    <br>
    <p class="review">I'm supposed to list the pros and cons of a restaurant, but that's hard to do when there are no cons! Amazing restaurant!
        Thanks so much to SushiGo for doing what they do!</p>
</div>
<div class="box">
    <img src="Images/jerry.jpg" alt="Picture of Lauren">
    <p><span>Jerry Seinfeld.</span>
        <br>Successful food blogger</p>
    <br>
    <p class="review">I am lost for words. I will literally only eat here from now on. SushiGo, you are the best restaurant I've even been
        to.</p>
</div>
<div class="black">
    <h2 id="whyus">Why <strong>SushiGo?</strong></h2>
    <div class="center">
        <img src="Images/lign.PNG" class="line">
        <br>
        <br>
    </div>
    <p class="grey center margin">SushiGo has been working for countless years to provide our customers with amazing experiences. Here are a few specific
        things we do to make the SushiGo experience better.</p>
    <aside>
        <img src="Images/Sushi-chef.jpg" width="400" class="sushipic">
    </aside>
    <img src="Images/money.ico" alt="Cheap" id="cheap" width="60">
    <h3 class="grey price">The price</h3>
    <p class="left">SushiGo has the lowest prices of any sushi restaurant in Los Angeles.</p>
    <br>
    <img src="Images/sushiicon.png" width="60">
    <h3 class="grey price">The food</h3>
    <p class="left">SushiGo has repeatedly been reported by numerous foodies as having the best sushi in the US. We hire only the best chefs,
        and have high-quality ingredients.</p>
    <br>
    <img src="Images/experienceicon.png" width="65">
    <h3 class="grey price">The experience</h3>
    <p class="left">SushiGo has been in business for over 50 years, and every chef has been making sushi for at least 20 years.</p>
    <h2 id="whyus">Our <strong>Allergy Policy</strong></h2>
    <div class="center">
        <img src="Images/lign.PNG" class="line">
        <br>
        <br>
    </div>
    <p class="grey center margin">We want to make our restaurant accesible to everyone. If you have an allergy, please inform your server who will gladly
        assist you. All of our food has gluten free, vegetarian/vegan, and peanut free options, and we can adjust the recipes
        if necessary to meet your needs.</p>
    <br>
    <br>
</div>
<footer>
    <br>
    <p class="center">&copy; 2017 by Sushi Go.</p>
    <p class="center grey">Website made by Sam Gerstmann.</p>
</footer>