How do I get the elements to go back to their correct position after media query?

I'm having trouble getting some list elements back to their right place after resizing the window back from "@media screen and (max-width: 800px)".

These list elements are as default centered in line in the header and my goal is to have them displayed in my sidebar on smaller devices.

Right now everything works great when resizing from big screen to small screen but then I use some javascript in small screen mode to open and close the side menu and when I then try to resize it back to big screen size the list elements doesn't go back to where they are supposed to be.

They seem to stay aligned left of the page and not centered in line anymore.

Also I've checked for overrides in the css that could cause this problem but there seem to be none and it's strange that it works before I use javascript.

  // för att öppna sidomenyn med 250 width
function openNav() {
    document.getElementById("minHuvudmeny").style.width = "250px";
}

function closeNav() { <!--Script för att stänga sidomenyn med 0 width-->
    document.getElementById("minHuvudmeny").style.width = "0";
}

  body {
    text-align: center;
    background-image: url(bakgrund.jpg);
    background-position: bottom;
    background-size: auto;
    font-family: 'Cuprum', sans-serif;
    left: 0;
    margin: 0; }

    .navknapp {                  ****Here i put the nav list inline****
    display: inline;
    margin: 10px; }

    @media screen and (max-width: 800px) {
    .huvudmeny {
        height: 100%;
        width: 0;
        background-color: #fff;
        position: fixed;
        z-index: 1;
        overflow-x: hidden;
        transition: 0.5s;
        top: 0;
        left: 0;
        padding: 0;
        padding-top: 60px;
    }
    .visameny {
        display: block;
        font-size: 50px;
        text-align: left;
        cursor: pointer;
        position: fixed;
        margin-left: 10px;
        top: 0;
    }
    .ejvisameny {
        display: block;
    }
    .huvudmeny .navknapp {                 Here i put the navlist back to blocks
        display: block;
        border: 1px solid black;
        transition: 0.3s
    }
    .huvudmeny .navknapp:hover,
    .offcanvas .navknapp:focus {
        background-color: red;
    }
    .huvudmeny .ejvisameny {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
}

<header>
    <h1 id=huvudRubrik>Välkommen till Daniels sida</h1>
    <nav id="minHuvudmeny" class="huvudmeny">
        <a href="javascript:void(0)" class="ejvisameny" onclick="closeNav()">&#10006;</a>
        <li class="navknapp"><a href="Ommig2/ommig2.htm">Home</a></li>
        <li class="navknapp"><a href="news.asp">News</a></li>
        <li class="navknapp"><a href="contact.asp">Contact</a></li>
        <li class="navknapp"><a href="about.asp">About</a></li>
    </nav>
    <span class="visameny" onclick="openNav()">&#9776;</span>
</header>

Solution

I suggest that you add another media query for desktop (min-width:801px) where you assign a 100% width to a nav with !important.

@media screen and (min-width: 801px) {
  .huvudmeny {
    width:100% !important;
  }
}

Thus, you'll override a Zero width of a nav, that sticks the menu to left edge.

demo