title: how to align two columns in a row CSS
body: <p>I'm trying to align two columns of buttons next to each other to be used as links to other pages.
  I have them in their position but their squashed up. see below code. I'm also wanting to create a responsive layout which it is but in such a condensed form.</p>
  
  <p>positioning is not my strong point so appreciate any suggestions.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
      background-color: #ede6c1;
      padding: 15px;
      margin: auto;
      text-align: center;
  }
  
  p {
      font-family: "Times New Roman", Times, serif;
      color: #080000;
  }
  
  article {
      border: black;
      width: 100%;
      height: 100%;
      padding: 10px;
      margin: 10px;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      box-sizing: border-box;
      margin: 0;
      font-family: Arial;
  }
  
  
  /* two equal columns that floats next to each other */
  
  .row {
      display: -ms-flexbox;
      /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap;
      /* IE10 */
      flex-wrap: wrap;
      padding: 0 4px;
      justify-content: center;
  }
  
  .column {
      -ms-flex: 25%;
      /* IE10 */
      flex: 20%;
      max-width: 20%;
      padding: 0 4px;
      margin: 30px;
  }
  
  .menu-button {
      background-color: rgba(85, 100, 83, 0.8);
      padding: 20px 0;
      font-size: 30px;
      margin: 10px;
      width: 200px;
      min-width: 100px;
      border-radius: 25px;
      box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);
  }
  
  .menu-button:hover {
      width: 200px;
      height: 40%;
      box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787);
      color: black;
  }
  
  a {
      color: black;
      text-decoration: none;
  }
  
  a:hover {
      color: rgba(71, 69, 69, 0.787);
      text-decoration: none;
  }
  
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  
  @media screen and (max-width: 800px) {
      .column {
          -ms-flex: 50%;
          flex: 50%;
          max-width: 50%;
      }
  }
  
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  
  @media screen and (max-width: 600px) {
      .column {
          -ms-flex: 100%;
          flex: 100%;
          max-width: 100%;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;section&gt;
          &lt;article&gt;
              &lt;h1&gt;Seattle Colours&lt;/h1&gt;
              &lt;div class="row"&gt;
                  &lt;div class="column"&gt;
  
                      &lt;a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button" style="width:100%"&gt;Wood
                       type&lt;/a&gt;
  
  
                      &lt;a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%"&gt;Specification&lt;/a&gt;
  
                      &lt;a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%"&gt;Pricing&lt;/a&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="column"&gt;
                      &lt;a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%"&gt;News&lt;/a&gt;
  
  
                      &lt;a class="menu-button" href="../Wood-Type/.html" role="button" style="width:100%"&gt;FAQ&lt;/a&gt;
  
                      &lt;a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button" style="width:100%"&gt;Images&lt;/a&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/article&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>