title: Width percentages won't align together (nav menu with web content)
body: <p>I have a problem with aligning a navigation menu with the rest of the content of my website.</p>
  
  <p>Both are in 80% but when I see them in a larger screen size it won't align... even if I reduce the size of the navigator. Do I have to put it inside a new div or something?</p>
  
  <p>Here is the css for the <strong>navigation menu</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>#navigation {
  width: 100%;    
  margin-left: 0px;
  margin-right: 0px;
  position: absolute;
  top: 0px;
  
  #navigation ul {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-around;
  padding: 0; 
  </code></pre>
  
  <p>Here is the css for the <strong>rest of the content</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>#container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  </code></pre>
  
  <p>The website is: <a href="http://josefinaechenique.esy.es/biografia.html" rel="nofollow noreferrer">http://josefinaechenique.esy.es/biografia.html</a></p>
  
  <p><strong>photo of the problem</strong>
  <a href="https://i.stack.imgur.com/0F67h.png" rel="nofollow noreferrer">here</a></p>
  
  <p>Same is happening with my <code>#fixedbar</code>. If you can help me with that too it would be amazing. I'm new here.</p>