title: Opaque NavBar Overlapping H1 and content
body: <p>Ok so figured out the first problem.... now my navbar brand isn't expanding. It seems to be stuck at one size and its added a scroll bar to accommodate. How to I get the whole navbar to move over for the brand?</p>
  <pre><code>.navbar {
    position: relative;
    display:inline-block;
    overflow: auto;
    background: #f4f4f4;
    opacity: .6;
    width: 100%;
    padding: 5px 8px;
    z-index: 9999;}
  
  .navbar-brand {
    color:black;
    font-weight: bold;
    font-size: 300%;}
  
  .navbar a {
    float: left;
    display: block;
    text-align: center;
    overflow: auto;
    padding: 5px 8px;}
  
  .navbar a:hover{
    background-color:#ede2d4;}
  
  
  &lt;nav class=&quot;navbar navbar-expand-lg navbar-light fixed-top justify-content-between&quot;&gt;
   &lt;div class=&quot;container-fluid&quot;&gt;
    &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Hello&lt;/a&gt;
     &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
      &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
        &lt;li class=&quot;nav-item active&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;index.html&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;facts.html&quot;&gt;Facts&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;chart.html&quot;&gt;Chart&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;video.html&quot;&gt;Video&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt;
          &lt;a class=&quot;nav-link&quot; href=&quot;jokes.html&quot;&gt;Jokes&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;div&gt;
      &lt;form class=&quot;navbar-form navbar-left form-inline&quot;&gt;
        &lt;input class=&quot;form-control mr-sm-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
        &lt;button class=&quot;btn btn-outline-success my-2 my-sm-0&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;h1&gt;Testing Page &lt;/h1&gt;
  </code></pre>