Full width header with centered elements in HTML/CSS

Question

I have an old purchased WordPress theme from 2010 and decided to make it a little bit more modern by adding my a sticky header. To do so, I downloaded a plugin called myStickymenu . The plugin seems to work perfectly, however, my theme header has a width of 960px and would like to make it full width.

I started playing with the HTML / CSS code of my theme in order to change my header width to full width but I'm having problems centering my navigation menu and potentially, some other elements that I want to add to my header.

HTML CODE:

<header id="header">
        <div class="container_header clearfix">
                <div class="menu-row-top clearfix">

                  <div class="test-text"> This is just some random text </div>

                  <!-- NAVIGATION -->
                  <nav class="primary">
                       <?php wp_nav_menu( array(
                         'container'       => 'ul', 
                         'menu_class'      => 'sf-menu', 
                         'menu_id'         => 'topnav',
                         'depth'           => 0,
                         'theme_location' => 'header_menu' 
                        )); 
                        ?>
                   </nav><!--.primary-->
            </div>
     </div>
</header>

CSS CODE:

#header {
  width: 100%;
  position: relative;
  z-index: 99;
}

.container_header{
background: #0459b5;
}

nav.primary {
position: relative;
z-index: 2;
}

With the above code, I basically have test-text at the extreme left of my blue header bar and my navigation menu at the extreme right. I've read many forum posts about similar problems and people seems to suggest to add a max-width.

However, with

.menu-row-top {
max-width: 960px;
}

Everything moves to the left, in a div of a with of 960px, from the extreme left of my screen.

I would like to get to correct HTML/CSS combination to be able to always have the elements within .menu-row-top centered on my header bar so that people with different screen resolution can easily navigate on my website. I'd basically love to have everything align from left to right and I'll use CSS to eventually correctly positioned the elements.

Answer 1

Try the following:

.menu-row-top {
    margin: 0 auto; 
    max-width: 960px;
}

Answer 2

You can wrap all elements that you want to center into new div eg "headerCenter"

   <div class="menu-row-top clearFix">
     <div class="headerCenter">
     //centered elements e.g
     <nav class="primary">
     links
     </nav>
     </div>
     //full width located elements e.g.
     <div class="logo"></div>
   </div>

Then in your stylesheet:

.headerCenter{
max-width: 960px;
margin:0 auto;
}
.logo{
margin-left:50px;
margin-top:50px;
width:100px;
height:50px;
background:url('path/to/logo/image');
background-size:100%; or (100% 100%)
}