title: CSS - Borders overlapping on zoom in/out
body: <p>So I have this layout with a 1px border all around every box in it. Inside these boxes the background is a gradient with a 1px border on top and bottom (to make it look like a button) but sometimes when I zoom in or out this breaks, either I get a 1px white line between the black outline and the bottom border of the box or it becomes bigger than the container and surpasses the black outline.</p>
  
  <p>Here are some screenshots to show what I mean:
  <img src="https://i.stack.imgur.com/rJUsc.png" alt="what it looks like on zoom">
  <img src="https://i.stack.imgur.com/MEh2S.png" alt="what it should look like">
  My code being:</p>
  
  <pre><code>    .main-canvas-container {
      height: 1444px;
      width: 830px;
      margin: 0 auto;
      margin-top: 350px;
      position: relative;
      border: 1px solid #000;
  }
  
  .nav-container {
      height: 47px;
      width: 100%;
      border-bottom: 1px solid #000;
  }
  
  nav {
      height: 45px;
      width: 100%;
      border-top: 1px solid #808082;
      border-bottom: 1px solid #5f5f5f;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div class="main-canvas-container"&gt;
  &lt;div class="nav-container"&gt;
  &lt;nav&gt;
  &lt;/nav&gt;
  &lt;/div&gt;&lt;!-- nav-container --&gt;
  &lt;/div&gt;&lt;!-- main-canvas-container --&gt;
  </code></pre>