title: I tried to align 2 identical boxes with border using negative margin but it's off by a little
body: <p>I tried to make 2 boxes with the same dimension, padding, and border align on one another, but it's off by a bit. They aren't perfectly on top of the other one.
  Then, I tried the same thing but without borders. Turns out, they align perfectly.</p>
  <p><a href="https://i.stack.imgur.com/ArqaI.png" rel="nofollow noreferrer">before, without borders</a></p>
  <p><a href="https://i.stack.imgur.com/F9JZ5.png" rel="nofollow noreferrer">after, without borders</a></p>
  <p><a href="https://i.stack.imgur.com/VfsTb.png" rel="nofollow noreferrer">before, with borders</a></p>
  <p><a href="https://i.stack.imgur.com/lE4EF.png" rel="nofollow noreferrer">after, with borders</a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          html {
          padding: 0rem;
          margin: 0rem;
          border: 0rem;
          }
  
          .one {
              margin: -0rem;
              margin-bottom: -0rem;
              }
  
          .two {
              margin: -0rem;
              margin-top: -10rem;
          }
              
          .container p {
            width: 10rem;
            height: 10rem;
            border: 0.1rem solid blue;
            background-color: ;
          }
  
          .container p:last-of-type {
              background-color: ;
          }
  
  
           div{
           margin: 10 rem; 
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;p class=&quot;one&quot;&gt;paragraph one.&lt;/p&gt;
        &lt;p class=&quot;two&quot;&gt;paragraph two.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I'd appreciate it if you could tell me what I did wrong.</p>