Centering header items not working - html

Question

I cannot seem to get the header to center once you stretch the page more than 1100 pixels and max-width is exceeded.
How can I keep the 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 and (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>

Answer 1

Add left, right, and margin properties to .navigationmenu as such:
.navigationmenu {
position: fixed;
width: 100%;
max-width: 1100px;
z-index: 1000;
/* Add these below */
left: 0;
right: 0;
margin: auto;
}