style.
  h1{
    font-family: Helvetica
  }
  p{
    font-size: 10px;
  }

  .radiobutton{
    font-family: Helvetica
  }

  .container {

  }
  .headerLayout{
    width: 100%;
    height: 100px;
    background: palevioletred;
  }
  .invContainer{
    display: none;
    width: 1200px;
    height: 800px;
    background: lightgreen;
    z-index: 10;
    opacity: 0.5;
  }

  .col-320 {
    width: 320px;
    float: left;
    background: lightpink;
  }
  .col-980 {
    width: 980px;
    float: left;
    background: pink;

  }
  .button-render {
    width: 500px;
    height: 100px;
    background: green;
  }
body
  .headerLayout
    img.post-page__logo(src='', alt='React')
    h1 This is the header layout
    ul blah blah blah

  .container
    .col-md-4
      h1 nav container 320px wide
      ul
        li Here is a link to something
        li another link here
        li maybe another one
        li it is up lto u to use
      ul
        li another list
        li another link?
        li another navigation route?
    .col-md-10
      h1 This is where content goes 980px wide
      ul
        li can list stuff here
        li like this
        li and like this

script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js')