响应式导航菜单对齐

Question

I have a problem with my responsive navigation. My menu is aligned only on contact page. I tried different approach like changing it from inline-block to block to flex, but with no success.I put to sidemenu text-align:center. Can someone help me to fix it?

<header class="header">
        <div class="logo">
            <img src="assets/img/ermita-logo.png" alt="Solaia" height="40px" width="auto">
        </div>
        <nav>
            <div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i>
            </div>
            <div id="menu" class="sidemenu">
                <a href="index.html">Home</a>
                <a href="wines.html">Wines</a>
                <a href="winery.html">Winery</a>
                <a href="awards.html">Awards</a>
                <a href="contact.html">Contact</a>
                <a href="#" class="closebtn" onclick="closeFunction()">&times;</a>
            </div>
        </nav>
    </header>

CSS

 @media screen and (max-width: 600px){
    #mainbox{
      display:flex;
      float:right;
      padding-right: 30px;
    }
    .header{
      height: 70px;
      position: absolute;
      width: 100%;
    }
    .sidemenu .closebtn{display:block;}
    .sidemenu{
      display: inline-block;
      position: fixed;
      top: 0px;
      right: 0px;
      height: 100%;
      width: 0px;
      background-color:black;
      z-index: 1;
      padding-top: 100px;
      overflow-x: hidden;
      transition: all .5s;
      text-align: center;
      float:none;
     
   
     
     }
     .sidemenu a{
       display:block;
       padding:20px 10px;
       text-decoration: none;
       font-size: 20px;
       color:white;
     }

Javascript

function openFunction(){
  document.getElementById("menu").style.width="100%";
  document.getElementById("mainbox").style.marginLeft="300px";
 }
function closeFunction(e){
    e = e || window.event;
    e.preventDefault();
 document.getElementById("menu").style.width="0px";
 document.getElementById("mainbox").style.marginLeft="0px";
;
}

Answer 1

@m

edia screen and (max-width: 600px){
    #mainbox{
      display:flex;
      float:right;
      padding-right: 30px;
    }
    .header{
      height: 70px;
      position: absolute;
      width: 100%;
    }
    .sidemenu .closebtn{display:block;}
    .sidemenu{
      display: block;
      top: 0px;
      right: 0px;
      height: 100%;
      background-color: black;
      z-index: 1;
      overflow-x: hidden;
      transition: all .5s;
      float: none;
     }
     .sidemenu a{
       display:block;
       padding:20px 10px;
       text-decoration: none;
       font-size: 20px;
       color:white;
     }
    }