html - Centering header items not working -


i cannot seem header center once stretch page more 1100 pixels , max-width exceeded.

how can keep header centered?

$(document).ready(function() {    var scroll_pos = 0;    $(document).scroll(function() {      scroll_pos = $(this).scrolltop();      if (scroll_pos > 580) {        $(".normalmenuitem").css('color', '#a9a9a9');        $(".normalmenuitem").css('padding-left', '13px');        $(".normalmenuitem").css('padding-right', '13px');      } else {        $(".normalmenuitem").css('color', '#5f666f');        $(".normalmenuitem").css('padding-left', '17px');        $(".normalmenuitem").css('padding-right', '17px');      }    });  });
@media screen , (max-width: 960px) {    .normalmenuitem {      display: none;    }  }  .box {    background-color: #fff;    position: absolute;    height: 59px;    width: 100%;    top: 0;  }  .navigationmenu {    position: fixed;    width: 100%;    max-width: 1100px;    z-index: 1000;  }  #logo {    transform: translatey(-50%);    position: absolute;    top: 29px;    left: 25px;    width: 145px;  }  /* top right menu! */    .holderrr {    position: absolute;    top: 10px;    right: 0px;  }  .rightmenu {    display: inline-block;    text-decoration: none;    text-align: center;    font-family: nunito-semibold;    font-size: 15px;    padding: 6px 17px 6px 17px;  }  .normalmenuitem {    padding: 6px 17px 6px 17px;    text-decoration: none;    color: #5f666f;    transition: .3s color;    transition: .3s padding;  }  .normalmenuitem:hover {    color: #292f36 !important;    padding-left: 20px;    padding-right: 20px;  }  #trial {    transition: .3s padding;    color: #e16065;  }  #trial:hover {    color: #d64f54;    padding-left: 20px;    padding-right: 20px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="div">    <div class="navigationmenu">        <div class="box"></div>        <div class="nav">        <a href="http://braemo.com">          <img id='logo' src="http://images8.webydo.com/92/9273203/3958%2fdcd54db5-c492-02ba-64c8-6590fd8c816c.png">        </a>      </div>        <div class="holderrr">        <div class="rightmenu">            <a class="normalmenuitem" href='#'>features</a>          <a class="normalmenuitem" href='#'>pricing</a>          <a class="normalmenuitem" href='#'>blog</a>          <a class="normalmenuitem" href='#'>support</a>          <a class="normalmenuitem" href='#'>log in</a>          <a class="rightmenu" id="trial" href='#'>start free trial</a>        </div>      </div>      </div>  </div>

add left, right, , margin properties .navigationmenu such:

.navigationmenu {     position: fixed;     width: 100%;     max-width: 1100px;     z-index: 1000;      /* add these below */     left: 0;     right: 0;     margin: auto; } 

Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -