CodePen

HTML

            
              <div class="container">
  <div class="grid test1">
    <div class="col-1-2">
      <img src="http://placehold.it/500x500/eee" />
    </div>
    <div class="col-1-2">
      <img src="http://placehold.it/500x500/eee" />
    </div>
  </div>

  <div class="compare">
    <h1>Lorem ipsum ...</h1>
    <p>This shows how wide the grid <em>should</em> be.</p>
  </div>

</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              *{
  @include box-sizing(border-box);
}

$pad: 35px;

.grid {
    clear: both;
	  overflow: hidden;
	  margin-left: -$pad;
    background: #BBBBBB;
	}
	
	[class*='col-'] {
	  float: left;
	  padding-left: $pad;
	  min-height: 1px;
    border-bottom: 2px solid #000000;
	}
	
	.col-2-3 {
	  width: 66.66%;
	}
	
	.col-1-3 {
	  width: 33.33%;
	}
	
	.col-1-2 {
	  width: 50%;
	}
	
	.col-1-4 {
	  width: 25%;
	}
	
	.col-1-8 {
	  width: 12.5%;
	}
	
	.col-3-4{
		width: 75%;
	}
	
img{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.container{
  width: 60%;
  padding: $pad;
  background: #DDDDDD;
  margin: $pad auto;
}

.compare{
  background: #BBBBBB;
  line-height: 1em;
  display: block;
  padding: 1em;
  margin: 1em 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................