Question

In this example layout I want only hero unit to be 100% wide and rest within the default grid. For example, check this site. It has only the hero unit part (showcase area) in full width and rest in fixed width (navigation, bottom content, footer).

I need to do this without losing responsive design feature.

Answer 1

move your .hero-unit div outside of your .container div.

the .container style confines you to a set width. and anything inside it will have a maximum width of it’s parent.
instead of:

<div class="container">
   <div class="hero-unit">
   </div>
</div>

use:

<div class="hero-unit">
</div>
<div class="container">
</div>