Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Wade Thomas
.a{fill-rule:evenodd;}techdegree
Wade Thomas
Full Stack JavaScript v1 Techdegree Student 9,495 Points

HTML grid system

How can I use a grid system and still get the header background to overflow it and span the whole page. I am only able to achieve this by leaving the header outside of the container for the design i want but then the header is not on a fluid grid so my responsive design is no so responsive. Any suggestions anyone ?

1 Answer

Logan Schmidt
Logan Schmidt
8,554 Points
Logan Schmidt
Logan Schmidt
8,554 Points

Set your header outside your container like you have. Then place a nav-bar class or whatever you want to call it inside the container.

<div class="site-wrapper">
  <div class="header">
    <div class="container">
      <nav>
        <ul>
        </ul>
      </nav>
    </div>
  </div>
</div>