<div class="page-wrap">
  <section class="main-content">
    <h1>Main Content</h1>
    <p><strong>I'm first in the source order.</strong></p>
    <p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p>
    <p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p>
  <nav class="main-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
  <aside class="main-sidebar">
    <p>I am a rather effortless column of equal height.</p>


              @import compass

/* Mixins */
@mixin flexbox-display-flex
  display: -webkit-box
  display: -moz-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex

@mixin flexbox-flex($width)
  -webkit-box-flex: 1
  -moz-box-flex: 1
  width: $width
  -webkit-flex: 1
  -ms-flex: 1
  flex: 1

@mixin flexbox-order($order)
  -webkit-box-ordinal-group: $order
  -moz-box-ordinal-group: $order
  -ms-flex-order: $order
  -webkit-order: $order
  order: $order

/* Example */

  width: 60%
  -moz-box-flex: 1
  background: white

  background: #ccc

  background: #ccc

/* Extra styling stuff */
  padding: 1em

  padding: 2em
  background: #79a693

  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

h1, h2
  font: bold 2em Sans-Serif
  margin: 0 0 1em 0

  font-size: 1.5em

  margin: 0 0 1em 0


Browser support

Chrome any
Firefox any
Safari any
Opera 12.1+
IE 10+

iOS any
Android any
Loading ..................