title: Why does my right sidebar only go up halfway the screen?
body: <p>I'm trying to figure out why my right sidebar only goes half-way up the screen and what I'm doing wrong. 
  I have the HTML and CSS at the bottom and a picture of the website at the bottom. I'm trying to get the text in the middle but when I do that the text blocks the right sidebar from going all the way up. I have a picture of what it's supposed to look like at the bottom also. I could really use some help with this.  </p>
  
  <p><a href="https://i.stack.imgur.com/Wz6pV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wz6pV.png" alt="enter image description here"></a></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>/* right sidebar */
  #right_sidenav {
    width: 180px;
    float: right;
    background-color: #F5DEB3
    padding: 0;
  }
  
  /* the styles for the section */
  html {
    background-image:url(../images/bats.gif);
    background-repeat: repeat;
  }
  body {
    font-family: Arial, Helvetica, sans-serif;
    width: 800px;
    background-color: white;
    border: 5px solid black;
    box-shadow: 5px 5px 5px 5px black;
    margin: 0 auto;
  }
  section {
    width: 600px;
    float: right;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom; 20px;
  }
  main {
    clear: both;
  }
  aside {
    width: 160px;
    float: left;
  }
  section h2 {
    margin-left: 0;
  }
  section figcaption {
    float: right;
    clear: right;
    margin-left: 10em;
    padding-right: 15em;
  }
  section img {
    float: left;
    margin: 0;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
      &lt;h2&gt;20" Deranged Cat&lt;/h2&gt;                 
          &lt;figure&gt;
              &lt;picture&gt;
                  &lt;img src="images/cat1.jpg" alt="cat"&gt;
              &lt;/picture&gt;
  
              &lt;figcaption&gt;This cat provides its own light and is perfect for a
              backyard haunting.
                  Price 19.99&lt;/figcaption&gt;
          &lt;/figure&gt;
  &lt;/section&gt;
  &lt;div id="right_sidenav"&gt;
  &lt;h5&gt;Customers who bought this product also bought:&lt;/h5&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;figure&gt;
                  &lt;picture&gt;
                      &lt;a href="#"&gt;&lt;img src="images/flying_bats.jpg" alt="flying bat"&gt;&lt;/a&gt;
                  &lt;/picture&gt;
                  &lt;figcaption&gt;
                      &lt;a href="#"&gt;Flying bats&lt;/a&gt;
                  &lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;figure&gt;
                  &lt;picture&gt;
                      &lt;a href="#"&gt;&lt;img src="images/rat1.jpg" alt="rat"&gt;&lt;/a&gt;
                  &lt;/picture&gt;
                  &lt;figcaption&gt;
                      &lt;a href="#"&gt;16" Ugly rat&lt;/a&gt;
                  &lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;figure&gt;
                  &lt;picture&gt;
                      &lt;a href="#"&gt;&lt;img src="images/strobe1.jpg" alt="strobe light"&gt;&lt;/a&gt;
                  &lt;/picture&gt;
                  &lt;figcaption&gt;
                      &lt;a href="#"&gt;Mini strobe light&lt;/a&gt;
                  &lt;/figcaption&gt;
              &lt;/figure&gt;   
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/eIVEI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eIVEI.png" alt="enter image description here"></a></p>