Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Henry Lopez
Henry Lopez
7,369 Points

Grid pushes to next line

When I have a grid layout of 

<div class="container clearfix">
      <div class="grid_8 ">
           <p>Changing Lives</p>
           <p>Impacting the Community</p>
           <p>Impacting the World</p>
      </div>

        <div class="grid_4 omega">
         <img src="img/img-1.jpg" alt="">

       </div>

Is there a reason that when I begin decreasing the screen size from full screen, it reaches a point where the grid_4 gets bumped down instead of scaling with grid_8 until it reaches the next media querie?

CSS 

 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 


.grid_1 { width: 6.5%; } /*65px*/
.grid_2 { width: 15%; } /*150px*/
.grid_3 { width: 23.5%; } /*235px*/
.grid_4 { width: 32%; } /*320px*/
.grid_5 { width: 40.5%; } /*405px*/
.grid_6 { width: 49%; } /*490px*/
.grid_7 { width: 57.5%; } /*575px*/
.grid_8 { width: 66%; } /* 660px*/
.grid_9 { width: 74.5%; } /*745px*/
.grid_10 { width: 83%; } /*830px*/
.grid_11 { width: 91.5%; } /*915px*/
.grid_12 { width: 100%; } /*1000px*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 90%;
  max-width:1000px;
    margin: auto;
}```

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Henry,

The width of your 2 columns add up to 98% which means you only have 2% space between for a gutter. You have a fixed gutter size of 20px set but it should be 2% instead.

At 1000px, 2% is 20px and so there is enough room to have a 20px right margin on each column. However, at 900px for example, 2% is only 18px and with a 20px right margin on your grid_8 column there isn't enough room for the grid_4 column.

Try changing your right margin to 2%.

Henry Lopez
Henry Lopez
7,369 Points

THANKS!