Gusatvo Pacheco Gusatvo Pacheco - 1 year ago 89
CSS Question

How to get rid of the left and right margins in 966 grid?

When the viewport size is 784 x 741 there is a left and right margin applied to the box that I want to get rid of. I know how to get rid of the "white space" at the top, but it's the "white space on the sides that I can't get rid of. Does anyone know how to eliminate the white space so the header stretches the full width of the browser viewport? My codepen is below.


<div class="container">
<div class="grid_12">
<li><a href="#">Home</a></li>
<li><a href="#">About</a><li>
<li><a href="#">Contact</a></li>

Answer Source

If you searching for the quickest way to make the header full width of the screen, you have to add another one class to two divs (let's call it 'full-width' for example). The result should be something like this:


<div class="container full-width">
    <div class="grid_12 full-width">
    <!-- another code -->


.full-width {
  width: 100% !important;
  margin-left: 0 !important;
  margin-rightL 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

This class will reset all paddings/margins and set width to 100% for every (or almost every) element with this class. After this, little margins (8px) will remain, this is margins of body element. If you want to get rid of them too, just include in your css this code:

body {
  margin-left: 0;
  margin-right: 0;

This is the quick way that mustn't break another css a lot. But if you're wondering what properties should be changed (you can change them manually instead of adding our 'full-width' class), have a look:

You can change the lines 105 and 106, 221 and 222 to

margin-left: 0;
margin-right: 0;

You also need to reset paddings on lines 327 and 328

padding-left: 0;
padding-right: 0;

Don't forget to set width: 100% !important; to container and grid_12 divs! In order not to break the remaining css, add new class(es) or ides.