title: Different div positioning on different screen sizes
body: <p>I am attempting to write a personal website and I am testing my website on a 1366x768 laptop screen, but also a 1920x1080 monitor attached to it. The layout of my divs looks perfectly on the laptop, but when I move the website across to the monitor, one of the div tags likes to move slightly (which is odd because the others seem fine.</p>
  
  <p>Here is an image to illustrate my problem:</p>
  
  <p><img src="https://i.stack.imgur.com/E6AI0.png" alt="enter image description here"></p>
  
  <p>I want the border of the navigation div to align with the letters k and d, and this works fine on the top image which shows the laptop monitor, but as you can see on the image below the div shifts. The red lines show the actual alignment, and the green lines show what I want it to look like.</p>
  
  <p>This is my CSS for the div:</p>
  
  <pre><code>nav{
  
      position: absolute;
      top: 60%;
      margin-left: 40%;
      margin-right: 20%;
      border: solid;
  
  }
  </code></pre>
  
  <p>My logic here was that if I use percentages for my positioning then the div will adapt to different screen sizes and stay fixed in the same position, but this doesn't seem to be the case. Any ideas on how to fix it would be very appreciated.</p>