title: Can anyone tell me how to align metro UI CSS Layout tiles
body: <p>The thing is that I have a pair of tiles of span 4 &amp; span 5 in the first row and in the next one i got a large tile of span 9 ... but everything is misaligned some idea of why it is happening???</p>
  
  <p>I'm using Chrome 31 with JQuery 2.xx -- Metro UI CSS 2.0 </p>
  
  <p>The width of the grid is the default 940px..</p>
  
  <pre><code>&lt;body class="metro"&gt;
  &lt;div class="wrapper"&gt;
  
  &lt;div class="board grid"&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="span4 bg-red tile header"&gt;size 4&lt;/div&gt;
  &lt;div class="span5 bg-red tile header"&gt;size 5 &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="span9  bg-cyan tile weather header "&gt;size 9&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row"&gt;
  &lt;div class="span2  bg-pink tile weather header "&gt;size 2&lt;/div&gt;
  &lt;div class="span6  bg-yellow tile weather header "&gt;size 6&lt;/div&gt;
  &lt;div class="span1  bg-orange tile weather subheader "&gt;size 1&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>"The Wrapper is blank"</p>
  
  <p>Right now it look like this:
  <a href="https://drive.google.com/file/d/0B2KdeNv2dTpxMU1NcF94eVBmeTQ/edit?usp=sharing" rel="nofollow">https://drive.google.com/file/d/0B2KdeNv2dTpxMU1NcF94eVBmeTQ/edit?usp=sharing</a></p>