title: How can I get two anchor tags positioned on the upper-left and upper-right of my page, in a div that covers the page, and ouside another div?
body: <p>I was going to work with some JSON to fill in content as an exercise, but while putting together my initial HTML I ran into an issue simply trying to have a couple links on either side of the page. I have a main-container div, and inside I have the two links, and another div, which I was going to put the JSON content. </p>
  
  <p>This question has nothing to do with the JSON content to be clear, I just got stuck on the css of trying to position the two  tags right. I've got height: 100% for the html, body, main-container, and second div. The closest I've got is floating the two tags to the left and right, then using an overflow: auto on the main-container, but the problem is that when you shrink the page, the a tags overflow the descendant div, and also, regardless of the size, there is a weird bar at the bottom of the page, with a scrollbar. </p>
  
  <p>Here is the jsfiddle:</p>
  
  <p><a href="https://jsfiddle.net/g8qeko98/" rel="nofollow noreferrer">https://jsfiddle.net/g8qeko98/</a></p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Checkboxes from JSON&lt;/title&gt;
      &lt;link rel="stylesheet" href="./styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="main-container"&gt;
      &lt;a id="home" href="#"&gt;Home&lt;/a&gt;
      &lt;a id="details" href="#"&gt;Details&lt;/a&gt;
      &lt;div class="checkboxes"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here are my styles:</p>
  
  <pre><code>html, body {
      height: 90%;
      margin: 0;
      padding: 0;
  }
  body {
      background: #7FA1E5;
  }
  #main-container {
      overflow: auto;
      height: 100%;
  }
  a {
      background: darkslategray;
      text-align: center;
      font-family: calibri;
      text-decoration: none;
      margin: 2%;
  }
  #home {
      box-shadow: 0.5px 0.5px 0.5px black;
      border-radius: 20px;
      color: lightblue;
      float: left;
  }
  #details {
      box-shadow: 0.5px 0.5px 0.5px black;
      border-radius: 20px;
      color: lightblue;
      float: right;
  }
  .checkboxes {
      background: #A3B7E5;
      height: 100%;
      margin: 5%;
      box-shadow: 1px 1px 1px black;
      border-radius: 10px;
  }
  </code></pre>