Css media query - default style doesn't apply when condition fail

Question

I have media query for max-width, so when the user resize the browser, the design will be responsive. The problem is that when the user returns back to the original browser size, the design will left little bit messed, it doesn't return to the inital position. When i reload the page, everything is fine. I thought that no media query rules should be applied when the condition isn't met and just default css should be applied?

Before resize:

When resized:

After resize back:

.nav-main-link {
    display: inline-block;
    border-right: 1px solid black;
    min-height: 50px;
}

#nav-main-search {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

#nav-main-search .search-input {
    border-radius: 5px 0px 0px 5px;
    width: 225px;
    font-size: 1.0em;
    box-sizing: border-box;
    padding: 2px 0px 0px 10px;
    height: 2em;
}

@media (max-width: 600px) {

    .nav-main-link {
        display: block;
        border-bottom: 1px solid white;
        border-right: 0;
    }

    #nav-main-search {
        float: none;
        position: relative;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 50px; 
    }

    #nav-main-search .search-input {
        display: block;
        width: 100%;
    }   

        #nav-main-search button[type="submit"]{
        position: absolute;
        top: 0px;
        right: 0px;
    }

}

EDIT: added jsfiddle demo DEMO: https://jsfiddle.net/qtenuuhv/

Answer 1

Tested this in a couple of browsers and it appears only to effect Chrome. It seems that it doesn't like the mix of display: inline-block; on .nav-main-link and float: right; on #nav-main-search.

To fix you can simply float .nav-main-link to the left instead of using inline-block:

• Add float: left; to .nav-main-link
• Remove display: inline-block; from .nav-main-link

* {
  border: 0;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}
body {
  font-family: Arial, Sans-Serif;
  font-size: 0.9em;
}
#main {
  min-width: 300px;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px 0 20px;
}
#nav-main {
  background: #936ac9;
  background: -moz-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #936ac9), color-stop(100%, #8745bc));
  background: -webkit-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: -o-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: -ms-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: linear-gradient(to bottom, #936ac9 0%, #8745bc 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#936ac9', endColorstr='#8745bc', GradientType=0);
  min-height: 50px;
  overflow: hidden;
  border-radius: 10px;
}
#nav-main a {
  color: white;
}
#nav-main-search {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
#nav-main-search .search-input {
  border-radius: 5px 0px 0px 5px;
  width: 225px;
  font-size: 1.0em;
  box-sizing: border-box;
  padding: 2px 0px 0px 10px;
  height: 2em;
}
.nav-main-link {
  float: left; /*Add this*/
  /*display: inline-block; Remove this*/
  border-right: 1px solid black;
  min-height: 50px;
}
.nav-main-link a {
  display: block;
  font-size: 1.3em;
  padding: 12px 10px;
  border-right: 1px solid white;
  min-height: 50px;
  box-sizing: border-box;
}
#nav-main-search button[type="submit"] {
  width: 50px;
  background-color: gray;
  font-size: 1.0em;
  display: block;
  color: black;
  float: right;
  border-radius: 0px 5px 5px 0px;
  overflow: hidden;
  cursor: pointer;
  height: 2.0em;
}
@media (max-width: 600px) {
  .nav-main-link {
    float: none; /*Add this*/
    display: block;
    border-bottom: 1px solid white;
    border-right: 0;
  }
  #nav-main-search {
    float: none;
    position: relative;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 50px;
  }
  #nav-main-search .search-input {
    display: block;
    width: 100%;
  }
  #nav-main-search button[type="submit"] {
    position: absolute;
    top: 0px;
    right: 0px;
  }
}

<div id="main">
  <nav>
    <ul id="nav-main">
      <li class="nav-main-link"><a href="#">Novinky</a>
      </li>
      <li class="nav-main-link"><a href="#">Kontakt</a>
      </li>
      <li class="nav-main-link"><a href="#">Kariéra</a>
      </li>
      <li id="nav-main-search">
        <form method="post" enctype="application/x-www-form-urlencoded" action="#">
          <input placeholder="hledat..." class="search-input" type="text" />
          <button type="submit" value="vyhledat"><i class="fa fa-search"></i>
          </button>
        </form>
      </li>
    </ul>
  </nav>
</div>

JS Fiddle: https://jsfiddle.net/q9r6xgyL/