title: How to remove jumbotron extra space?
body: <p>I'm fairly new to coding and building a simple personal website as a project for free code camp. I can't seem to get rid of the extra white space that jumbotron creates on the right side of my table of contents. I tried negative values in the padding, but it didn't work. Can anyone help with this?</p>
  
  <p><a href="https://i.stack.imgur.com/HxAyZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HxAyZ.png" alt="enter image description here"></a></p>
  
  <p><strong>Code:</strong></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>body {
    padding-top: 30px;
    background-image: url("http://www.iamag.co/features/itsart/wp-
    content/uploads/2014/07/imperial-boy-16.jpg");
  }
  .jumbotron {
    padding: 20px 20px 20px 20px;
  }
  #toc {
    list-style: none;
    margin-bottom: 30px;
  }
  #toc li {
    background: url(dot.gif) repeat-x bottom left;
    overflow: hidden;
    padding-bottom: 2px;
  }
  #toc a {
    float: left;
    display: inline-block;
    position: relative;
    bottom: -4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jumbotron"&gt;&lt;h2&gt;&lt;u&gt;Table of Contents&lt;/u&gt;&lt;/h2&gt;
    &lt;ul id="toc"&gt;
      &lt;li&gt;&lt;a href="#projects"&gt;Projects&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#links"&gt;Social Media Links&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Chapter 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Chapter 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Chapter 5&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>