HTML Divs are inconsistently using the CSS file

Question

I am using a framework called 960.gs (which is great!)

I build a div class 12 (which expands across whole web page) I then decide to build three divs within the class 12, each div has class 4 (4+4+4=12)

I have 2 CSS files, one text which has default settings for body, general fonts etc (general settings). And the other CSS file - stylesheet which is where I edit each div and apply styles etc.

For some reason, the 3 divs (within the main class 12 div). The first and second div utilize the text.css sheet, and the third div uses the stylesheet.css.

I have checked spelling and everything but I don't know why it's behaving like this. Advice would be helpful!

I have 5 screen shots of the code, advice would be appreciated https://db.tt/vyv5ihq4

Answer 1

Instead of nesting the three columns inside the .grid_12 container, just use .grid_4 for each of those columns. After the last .grid_4, use div.clear to setup a new row for additional content (div.clear should be used after each row so floats are reset and/or do not overlap one another).

<div class="grid_4">
  Grid one
</div>
<div class="grid_4">
  Grid two
</div>
<div class="grid_4">
  Grid three
</div>
<div class="clear"></div>
<!-- new columns and content go here after the clearfix above -->

960.gs demo