Why do I have white space on the right side of the website I'm building?

Question

I'm building a website using a grid system as the framework. At first I had no problems with margins and padding, but now I have extra white space on the right side of my website.

Here is my fiddle: http://jsfiddle.net/071ad2hg/1/

I already found the problem and it is from the following code:

.grid_12 { width: 100%; }

When I comment out this line the problem goes away, but I've used it in many places throughout my site and am wondering why this is happening all of a sudden. I would like to keep it as is and just fix it somehow.

Answer 1

Beacuse body has 8px margin you can change that by adding margin 0 to body css tag

demo http://jsfiddle.net/ckqkyaqd/

body {
    font-family: 'elegant_luxmager';
    color: #444948;
    margin:0;

}

Answer 2

Add this to your body in the css.

margin: 0;

and set a pixel width for your grids.

.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}

I would suggest using a .wrapper instead.

.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}

<div class="wrapper"></div>

---

Found your issue:

It's the 25% margin that adds the whitespace, use a wrapper to center that part or use <center>

#images_row_1, #images_row_2, #images_iOS {
 margin-left: 25%; 
}

Answer 3

Use the inspector in Google Chrome developer tools and see the order in which the CSS is being applied. You have this additional margin which is being applied to the div. Try using a wrapper div or better yet use a defined responsive framework like Bootstrap or Foundation .

#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}