title: ReactJS Bootstrap NavBar is shifted to the left a tiny bit
body: <p>I have a NavBar component, as below:</p>
  <pre><code>&lt;div id=&quot;navbar&quot; className=&quot;row dark-back&quot;&gt;
              &lt;div id=&quot;logo&quot; className=&quot;col-sm-1 lavender&quot;&gt;
                  hi
              &lt;/div&gt;
              &lt;div id=&quot;links&quot; className=&quot;col-sm-10 lavender&quot;&gt;
                  &lt;img
                      src={search}
                      alt=&quot;search icon&quot;
                      className=&quot;icon-links&quot;
                      onClick={() =&gt; {
                          navigate(&quot;/search&quot;);
                      }}
                  /&gt;
              &lt;/div&gt;
              &lt;div id=&quot;menu&quot; className=&quot;col lavender&quot;&gt;
                  hi
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>For some reason, it doesn't take up the whole screen, even though the width is set to 100vw.
  Here is the CSS below:</p>
  <pre><code>
  #navbar {
      width: 100vw;
      height: 10vh;
      position: fixed;
      box-shadow: 0 0 5px rgba(0.5, 0.5, 0.5, 0.5);
  }
  
  </code></pre>
  <p>Could it be something to do with Bootstrap? I see no reason why the NavBar shouldn't take up the whole screen.</p>