title: How do you pin elements to the bottom of a container in HTML and CSS?
body: <p>I am trying to make a simple portfolio website and I want two  tags at the bottom of the screen whenever I navigate down or up the page. So for example, if I am at the top of the page it says my name with three links, "About Me", "My Work", and "Contact". If I click on "About Me" it will navigate me down the page to where I have that section. Then this is where I need help, I want "My Work" and "Contact" at the bottom for easy navigation. I have been trying to figure this out for hours now which is why I am now asking a question on here. I am new to web programming so excuse me. Here is some of my code that is relevant.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    padding-top: 100vh;
    width: 100%;
    height: 100vh;
    color: white;
  }
  
  #container div {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  
  /* Styling for each indivual link (About Me, My Work, Contact) */
  #container div#AboutMe {
    background: white;
    color: black;
    font-family: Helvetica;
    font-weight: lighter;
    text-align: center;
    font-size: 21px;
  }
  
  #AboutMe p { 
   padding-right: 60%;
   padding-left: 10%;
   padding-top: 5%;
  }
  
  .animatedButtonBody span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
  
  .animatedButtonBody span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }
  
  .animatedButtonBody:hover span {
    padding-right: 25px;
  }
  
  .animatedButtonBody:hover span:after {
    opacity: 1;
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="AboutMe"&gt;
      &lt;h1&gt;About Me&lt;/h1&gt;
      &lt;p&gt;
       This is where some text will go.
      &lt;/p&gt;
      &lt;a href="#MyWork" class="animatedButtonBody"&gt;&lt;span&gt;My Work&lt;/span&gt;&lt;/a&gt;
      &lt;a href="#Contact" class="animatedButtonBody"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>