Full width hero unit in Twitter Bootstrap

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 fu

Answer 1

Well the answer is right but whenever you resize the site, hero-unit will then change to have spaces around (20px right, 20px left) because all the elements are bound to this body has paddings in @media max-width: 767px. Just do the code below to fix it too:

@media (max-width: 767px) { .hero-container { margin-right: -20px; margin-left: -20px; } }