title: Applying Flexbox with both columns and rows layout
body: <p>I wondered if you guys could help. It's been a few years since I sat down and created a website from scratch and I just want to do something
  simple. I'm aware and have used breakpoints in the past but it looks like Flexbox may be an alternative way to do this(?). I haven't got my head around it yet and I'm finding it a bit tricky to apply it to my code.</p>
  <p>In my layout I have two stacked rows: for the header and navigation links,
  then two columns beneath for the main content and finally a row beneath these for the footer.</p>
  <p>I'm including everything between body tags on my (work in progress) html page and the CSS below. Everything right now is in pixels. If you could give me any pointers on what I'm doing right and wrong (for instance, am I using too many containers, etc?) and how I'd be able to apply Flexbox to this I'd be most grateful.</p>
  <pre><code>body {
      background-color: #C4C4C4;
      font-family: 'Roboto', serif;
      /*font-size: 48px;*/
      line-height: 25px;
  }
  
  #page-container {
      margin: 0 auto;
      width: 793px;
  }
  
  header {
      background: url(&quot;../images/big-banner.jpg&quot;);
      background-size: 793px 285px;
      background-repeat: no-repeat;
      height: 285px;
      /*height: 285px;*/
  }
  
  header h1 {
      padding: 70px 0 0 20px;
      color: #FFFFFF;
      font-size: 2.8em;
  }
  
  header p {
      padding: 25px 0 0 20px;
      color: #FFFFFF;
      font-size: 1.4em;
  }
  
  
  h2 {
      font-size: 1.4em;
      font-weight: bold;
      padding-bottom: 20px;
  }
  
  h3 {
      font-size: 1em;
      font-weight: bold;
      padding-bottom: 20px;
  }
  
  
  p {
      line-height: 1.7;
      padding-bottom: 30px;
  }
  
  ul {
      padding-left: 20px;
  }
  
  li {
      list-style-type: disc;
      line-height: 2em;
      padding-left: 5px;
  }
  
  nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #605A52;
  }
  
  nav li {
      float: left;
      list-style-type: none;
      padding: 0;
  }
  
  nav li a {
      display: block;
      color: #FFFFFF;
      text-align: center;
      font-size: 1em;
      padding: 8px 15px 8px 15px;
      text-decoration: none;
  }
  
  nav li a:hover {
      color: #000000;
      background-color: #FFFFFF;
  }
  
  strong { 
      font-weight: bold;
  }
  
  small {
      font-size: 0.9em;
  }
  
  
  section {
  
  }
  
  article {
  
  }
  
  .contact-box {
      height: 200px;
      width: 200px;
      background-color: #FFFFFF;
      padding: 15px;
      -webkit-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
      -moz-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
      box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
  }
  
  summary {
  
  }
  
  
  .content-container {
      width: 793px;
      width: 100%;
      height: 100%;
      display: flex;
  }
  
  /* left col */
  .left-col {
      padding: 40px 20px 60px 60px;
      width: 450px;
      float: left;
  }
  
  /* wull-width left col for contact page */
  .full {
      width: 100%;
      padding-right: 40px;
  }
  
  /* right col */
  .right-col {
      background-color:#FFFFFF;
      width: 243px;
      float: left;
      align-items: stretch;
      height: 100%;
      padding: 40px 20px 10px 20px;
      margin: 10px 0 0 0;
  }
  
  .zebra-1, .zebra-2 {
      text-align: justify;
      margin: 10px 0 10px 0;
  }
  
  .zebra-1 {
      background-color: #EDEDED;
  }
  
  .zebra-2 {
      background-color: #FFFFFF;
  }
  
  .list-left, .list-right {
      text-align: left;
      float: left;
      width: 43%;
      padding-right: 5px;
  }
  
  footer {
      clear:both;
      background-color: #605A52;
      padding-left: 10px;
      color:#FFFFFF;
  }
  
  footer p {
      padding: 10px;
  }
  
  
          &lt;div id=&quot;page-container&quot;&gt;
  
                  &lt;header&gt;
                      &lt;h1&gt;Main title here&lt;/h1&gt;
                      &lt;p&gt;Sub title&lt;/p&gt;
                  &lt;/header&gt;
  
                  &lt;nav role=&quot;navigation&quot;&gt;
                      &lt;ul&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
  
                  &lt;div class=&quot;content-container zebra-1&quot;&gt;
                      &lt;section class=&quot;left-col&quot; role=&quot;main&quot;&gt;
                          &lt;h2&gt;Welcome&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum
                          &lt;/p&gt;
                          &lt;p&gt;Lorem ipsum
                          &lt;/p&gt;
                      &lt;/section&gt;
  
                      &lt;div class=&quot;right-col zebra-1&quot; role=&quot;complementary&quot;&gt;
                          &lt;aside&gt;&lt;div class=&quot;contact-box&quot;&gt;Contact info here&lt;/div&gt;&lt;/aside&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
                  &lt;div class=&quot;content-container zebra-2&quot;&gt;
                      &lt;section class=&quot;left-col&quot; role=&quot;main&quot;&gt;
                          &lt;h2&gt;Another header&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum
                          &lt;/p&gt;
                      &lt;/section&gt;
                      &lt;div class=&quot;right-col zebra-2&quot; role=&quot;complementary&quot;&gt;
                          &lt;p&gt;More stuff here&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;footer&gt;
                      &lt;p&gt;
                      &lt;small&gt;Copyright info&lt;/small&gt;
                      &lt;/p&gt;
                  &lt;/footer&gt;
  
          &lt;/div&gt;
  </code></pre>