title: How to keep 3 columns from breaking when resizing
body: <p>So basically, i'm trying to create a 3 column website. Everything looks good until i resize the window and then the third column breaks out of design and goes to the next line. I did check on Stackoverflow and found a slight help, which was to code-in a min-width for the body tag but the problem is that i get a horizontal scrollbar.</p>
  <p>Any ideas? Thanks in advance. And feel free to correct any of my coding structure!</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  &lt;title&gt;My Webpage&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;style&gt;
  * {
      box-sizing: border-box;
  }
  
  body {
      margin: 0;
      padding: 0;
      background-color: white;
      min-width: 960px; margin: 0 auto;
  }
  
  .header {
      font-family: 'Times New Roman', Times, serif;
      text-align: center;
      background-color: rgb(135, 219, 51);
      margin: 0;
      padding: 20px;
      color: rgb(0, 0, 0);
  }
  
  .header p {
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          }
  
  .navigation {
            }
  
  ul {
      background-color: rgb(183, 255, 0);
  list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;       
          }
  
          li {float: left;
          
      }
  
  li a {
      display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
  
      
  }
  
  a:hover {
      background-color: rgb(43, 226, 98);
  }
  
  .column p::first-letter {
    color:  rgb(183, 255, 0);
    font-size: xx-large;
    
  }
  
  .column {
    width: 30%;
    float: left;
    background-color: rgb(245, 245, 245);
   padding-left: 14px;
   padding-right: 14px;
   margin: 5px 15px;
   border-radius: 25px;
    border: 2px solid #73AD21;
   
     
   
  }
  
  .maincontent {
      box-sizing:content-box
      width: 100%;
    
    
  }
  
  .column p{
     
      text-align: justify;
   
      
     
  }
  
  .column h2{
    color:  rgb(183, 255, 0);;  
  margin: 0;
  padding-top: 14px;
  }
  
  .column:after {
    content: "";
    display: table;
    clear: both;
  }
  
  
  @media screen and (max-width:600px) {
    .column {
      width: 100%;
    }
  
   
  
  
  
  
  
  
  &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="header"&gt;
              &lt;h1&gt;Header&lt;/h1&gt;
              &lt;p&gt;orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="navigation"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a class="active" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;main&gt;
              &lt;div class="maincontent"&gt;
              &lt;div class="column"&gt;
                  &lt;h2&gt;Column&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="column"&gt;
                  &lt;h2&gt;Column&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="column"&gt;
                  &lt;h2&gt;Column&lt;/h2&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;/main&gt;
  
  
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>