Проблема при маштабировании
 

Когда проверяю верстку изменяя масштаб. Меню не уменьшается пропорционально со всем документом, а при минимальном масштабе начинает спрыгивать;

Пересмотрела много менюшек как сделаны, пробовала разные варианты, но результат один. Вроде бы у меня также сделано. Но работает не так. Где-то ошибка, но не могу найти.

<div class="wrapper">

    <div class="wrapper-main">
        <header class="header">
                   
           <nav class="navigation">
                 <ul>
                    <li><a href="#"  class="first_child">Main page</a></li>
                    <li><a href="#" >About company</a></li>
                    <li><a href="#" >Services</a></li>
                    <li><a href="#" >Something special</a></li>
                    <li><a href="#">References</a></li>
                    <li><a href="#" >Contact us now</a></li>
                </ul>
           </nav>
        </header> <!-- end header -->

    
    </div><!-- end wrapper-main -->
</div><!-- end wrapper -->

html, body {
  height: 100%;
  background: #bfbfbf;
  font-size: 14px;
  font-family: Arial, "Nimbus Sans L", Helvetica, sans-serif;
  line-height: 16px; }

/*WRAPPER*/
.wrapper {
  max-width: 1200px;
  width: 1200px;
  min-height: 100%;
  margin: 0px auto;
  background: #cdcdcd;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24); }

/*WRAPPER-MAIN*/
.wrapper-main {
  max-width: 950px;
  width: 950px;
  margin: 51px auto;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24); }

/*HEADER*/
.header {
  background-color: #ffffff;
  overflow: hidden;
  margin: 0 auto; }
 
.header .navigation {
    height: 66px;
    float: left;
    overflow: hidden; }
    .header .navigation li {
      display: inline-block;
      position: relative;
      padding: 26px 24px 26px 0;
      float: left;
      list-style: none; }
      .header .navigation li a {
        display: block;
        text-transform: uppercase;
        padding-left: 24px;
        text-decoration: none;
        color: #423329;
        text-align: left;
        border-left: dotted 1px #bababa;
        outline: none; }
        .header .navigation li a.first_child {
          border-left: none;
          padding-left: 42px; }

/*finish HEADER*/


/*finish MAIN-CONTAINER*/

попробуйте вместо:

padding: 26px 24px 26px 0;

написать:

padding: 26px 23px 26px 0;

или даже:

padding: 26px 22px 26px 0;

спасибо за ответ, но дело не в этом. все равно все начинает спрыгивать при минимальном масштабе

Вот еще один вариант горизонтального меню. В примере все работает хорошо при масштабировании у меня опять две колонки перескакивают. Где-то я делаю принципиальную ошибку или чего-то недопонимаю.

.header .navigation {
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 66px; }
    .header .navigation ul {
      clear: left;
      float: left;
      list-style: none;
      position: relative;
      left: 50%;
      text-align: center; }
      .header .navigation ul li {
        display: block;
        float: left;
        list-style: none;
        padding-top: 26px;
        position: relative;
        right: 50%; }
        .header .navigation ul li a {
          display: block;
          text-transform: uppercase;
          padding-left: 24px;
          padding-right: 24px;
          text-decoration: none;
          color: #423329;
          border-left: dotted 1px #bababa;
          line-height: 1.3em; }