title: Navbar breaking in responsive mode
body: <p>I have created a web portfolio for myself. Everything was fine while I was viewing it on my Desktop, but the issue happens when I view it on my phone.</p>
  <p>a) The navbar collapses but it is not aligned properly.
  b) There is some space on the right side of the viewport on my hero section. I am trying to understand the error but to no avail.</p>
  <p>Link to portfolio: <a href="https://smammar.netlify.app/" rel="nofollow noreferrer">https://smammar.netlify.app/</a></p>
  <p><strong>HTML code</strong></p>
  <pre><code>&lt;header class=&quot;navigation fixed-top&quot;&gt;
  &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark&quot;&gt;
  &lt;a class=&quot;navbar-brand font-tertiary h3&quot; href=&quot;index.html&quot;&gt;&lt;img src=&quot;images/logo2.png&quot; alt=&quot;logo&quot;
  style=&quot;width: 130px; height: 130px;&quot;&gt; &lt;/a&gt;
  &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navigation&quot;
  aria-controls=&quot;navigation&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot; id=&quot;responsiveNav&quot;&gt;
  &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;div class=&quot;collapse navbar-collapse text-center&quot; id=&quot;navigation&quot;&gt;
  &lt;ul class=&quot;navbar-nav ml-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;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
  &lt;a class=&quot;nav-link&quot; href=&quot;about.html&quot;&gt;about&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;nav-item&quot;&gt;
  &lt;a class=&quot;nav-link&quot; href=&quot;portfolio.html&quot;&gt;Portfolio&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  &lt;!-- hero area --&gt;
  &lt;section class=&quot;hero-area bg-primary&quot; id=&quot;parallax&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-lg-12 mx-auto&quot;&gt;
  &lt;h2 class=&quot;text-white font-tertiary&quot;&gt;Hi! I’m &lt;br&gt; Syed Mohammad Ammar &lt;br&gt; Full-Stack Designer&lt;/h2&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;layer&quot; id=&quot;l2&quot;&gt;
  &lt;img src=&quot;images/illustrations/dots-cyan.png&quot; alt=&quot;bg-shape&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;layer&quot; id=&quot;l4&quot;&gt;
  &lt;img src=&quot;images/illustrations/dots-orange.png&quot; alt=&quot;bg-shape&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;layer&quot; id=&quot;l6&quot;&gt;
  &lt;img src=&quot;images/illustrations/dots-group-cyan.png&quot; alt=&quot;illustrations&quot; class=&quot;bg-shape-6&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;layer&quot; id=&quot;l9&quot;&gt;
  &lt;img src=&quot;images/illustrations/dots-orange.png&quot; alt=&quot;bg-shape&quot;&gt;
  &lt;/div&gt;
  &lt;!-- social icon --&gt;
  &lt;ul class=&quot;list-unstyled ml-5 mt-3 position-relative zindex-1&quot;&gt;
  &lt;li class=&quot;mb-3&quot;&gt;&lt;a class=&quot;text-white&quot; href=&quot;https://twitter.com/SMAmmar5&quot;&gt;&lt;i class=&quot;fab fa-github&quot;
  id=&quot;socialIcons&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;mb-3&quot;&gt;&lt;a class=&quot;text-white&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-twitter&quot; id=&quot;socialIcons1&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;mb-3&quot;&gt;&lt;a class=&quot;text-white&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-behance&quot; id=&quot;socialIcons2&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;mb-3&quot;&gt;&lt;a class=&quot;text-white&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-linkedin&quot; id=&quot;socialIcons3&quot;&gt;&lt;/i&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- /social icon --&gt;
  &lt;/section&gt;
  &lt;!-- /hero area --&gt;
  &lt;!-- about --&gt;
  &lt;section class=&quot;section&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-lg-10 mx-auto text-center&quot;&gt;
  &lt;p class=&quot;font-secondary paragraph-lg text-dark&quot;&gt;I'm a full-stack designer based in Karachi, &lt;span style=&quot;color: #228B22&quot;&gt; Pakistan &lt;/span&gt; with
  experience in delivering end-to-end UX/UI design to complete website for software products. I'm passionate about improving the
  lives of others by creating human centric products.&lt;/p&gt;
  &lt;a href=&quot;https://www.dropbox.com/.../syed%20mohammad%20ammar.pdf...&quot; class=&quot;btn &quot;
  id=&quot;viewResume&quot;&gt;View Resume&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p><strong>CSS Code</strong></p>
  <pre><code>.navigation {
  padding: 40px 100px;
  transition: .3s ease;
  }
  .navigation.nav-bg {
  background-color: #000
  ;
  padding: 0 70px;
  }
  @media (max-width: 600px) {
  .navigation.nav-bg {
  padding: 15px 20px;
  }
  }
  @media (max-width: 600px) {
  .navigation {
  padding: 20px;
  background: #000
  ;
  }
  }
  .navbar .nav-item .nav-link {
  font-family: &quot;BwNistaInt-xBd&quot;;
  text-transform: uppercase;
  padding: 15px;
  }
  .navbar .nav-item.active {
  font-weight: bold;
  }
  .navbar-dark .navbar-nav .nav-link {
  color: #fff;
  }
  .navbar-dark .navbar-nav .nav-link:hover{
  border-color: #ffa500;
  color: #ffa500;
  box-shadow: 0 0.5em 0.5em -0.5em #ffa500;
  transition: all 0.2s;
  cursor: pointer;
  }
  .hero-area {
  padding: 300px 0 200px;
  position: relative;
  }
  .hero-area h2 {
  position: relative;
  z-index: 2;
  }
  .layer {
  position: absolute;
  z-index: 1;
  }
  #l1 {
  bottom: 0;
  left: 0;
  }
  #l2 {
  top: 190px;
  left: -250px;
  }
  #l3 {
  top: 200px;
  left: 40%;
  }
  #l4 {
  top: 200px;
  right: 40%;
  }
  #l5 {
  top: 100px;
  right: -150px;
  }
  #l6 {
  bottom: -20px;
  left: 10%;
  }
  #l7 {
  bottom: 100px;
  left: 20%;
  }
  #l8 {
  bottom: 160px;
  right: 45%;
  }
  #l9 {
  bottom: 100px;
  right: -10px;
  }
  .layer-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  }
  </code></pre>