title: HTML element does not go as full width
body: <p>So I have a code for a website that uses HTML and CSS but I have a problem with CSS.</p>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;TEST&lt;/h2&gt;
      &lt;div class=&quot;navbar&quot;&gt;
        &lt;div class=&quot;navbar-inner&quot;&gt;
          &lt;a href=&quot;todo.html&quot; class=&quot;notactive&quot;&gt;&lt;img src=&quot;todo.png&quot;&gt;&lt;/a&gt;
          &lt;a href=&quot;home.html&quot; class=&quot;active&quot;&gt;&lt;img src=&quot;home.png&quot;&gt;&lt;/a&gt;
          &lt;a href=&quot;info.html&quot; class=&quot;notactive&quot;&gt;&lt;img src=&quot;info.png&quot;&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>body {
    background-color: #222222;
    width: 100%;
  }
  
  img {
    width: 50px;
    height: 50px;
  }
  
  a {
    cursor: pointer;
  }
  
  .navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .navbar a {
    color: #f2f2f2;
    text-align: center;
    display: inline-block;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin: 0px auto;
  }
  
  .navbar a:hover {
    background: #222222;
    color: black;
  }
  </code></pre>
  <p>This is my result:
  <a href="https://i.stack.imgur.com/M8HV6.png" rel="nofollow noreferrer">Result Image</a></p>
  <p>It works and all, but if you look at the bottom left (at the menu), it isn't fully covered. I have tried many ways to cover it, but I can't seem to get it right.</p>
  <p>Any ideas? Appreciated if you explain it to me as well.</p>