Extending The Width Of main-navigation But Still Keep It Centre Aligned

My website is www.rosstheexplorer.com

I want the navigation menu to be the same length as the header. The header always covers the full width of the page.

I experimented with width, max width and float but I could not achieve the desired result.

Below is one of the experiments I tried.

@media screen and (min-width: 50em)
.main-navigation {
    font-size: .8125em;
    line-height: 2.09231em;
    text-align: center;

width: 100%
        float:left

}

I have been able to get the menu to cover the left or right hand side of the page but not both sides of the page.

Plus when I have been altering the width of the menu I have been unable to keep the text centered under the image.

Does anyone have any ideas?

1 answer

  • answered 2017-06-17 19:05 Jacob Desight

    You simply need to pull header element out from the page div:

    <div class="header">[...]</div>
    <div id="page" class="hfeed site">
      // This needs to go up
      <header id="masthead" class="site-header" role="banner">[...]</header>
      [...]
    </div>
    

    Like that:

    <div class="header">[...]</div>
    <header id="masthead" class="site-header" role="banner">[...]</header>
    <div id="page" class="hfeed site">
      [...]
    </div>