title: Why does adding a margin to my div push its content (columns) off the page?
body: <p>Adding a margin to the  div pushes the right column off the edge of the screen to the right.</p>
  
  <p>I have tried adding margins to both  and , altering  widths and even removing a width property from the  CSS altogether.</p>
  
  <p>With no margin at all, the 3 columns fit the width of the screen perfectly with a default tiny margin showing the background colour of my page. Adding ANY margin to  messes the whole thing up.</p>
  
  <pre><code>&lt;HTML&gt;
  &lt;main&gt;
      &lt;section&gt;
      Some text 1
      &lt;/section&gt;
  
      &lt;section&gt;
      Some text 2
      &lt;/section&gt;
  
      &lt;section&gt;
      Some text 3
      &lt;/section&gt;
  &lt;/main&gt;
  
  
  CSS
  
  &lt;&lt;&lt;&lt;&lt;&lt;&lt;SOME MEDIA QUERIES TO MAKE IT ADAPTABLE FOR MOBILE&gt;&gt;&gt;&gt;&gt;&gt;&gt;
  
  @media (min-width: 620px) {
  main {
      column-count: 2;
  }
  section {
      break-inside: avoid;
  }
  }
  
  @media (min-width: 960px) {
      main {
          column-count: 3;
      }
  }
  
  
  &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;NORMAL CSS&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
  
  main {
      width: 100%;
      margin-right: 5%;  &lt;&lt;&lt;&lt;&lt;PROBLEM AREA
      margin-left: 5%;
  }
  
  section {
      height: 25%;
      margin-bottom: 5%;
      padding: 20px;
      display: inline-block;
  }
  </code></pre>
  
  <p>I would like a 5% margin on the left and right of the  div with no margin between the  divs.</p>