title: How to center the logo, while having the elements near it?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>       .header{
      min-height: 90vh;
      width: 100%;
      background-image: linear- 
      
      gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),
      url(../images/background.jpg);
      background-position: center;
      background-size: cover;
      position: relative;
      overflow: hidden;
      background-repeat: no-repeat;
      background-attachment: fixed;
        
      }
  
      nav{
      min-height: 7%;
      background-color: white;
      opacity: 0.8;
      display: flex;
      padding: 2% 4%;
      justify-content: space-between;
      align-items: center;
      }
      nav img{
      width: 140px;
      }
      .nav-links{
      flex: 1;
      text-align: right;
      }
      .nav-links ul li{
      list-style: none;
      display: inline-block;
      padding: 8px 12px;
      position: relative;
      }
      .nav-links ul li a{
      color: rgb(0, 0, 0);
      text-decoration: none;
      font-size: 13px;
      }
      .nav-links ul li::after{
      content: '';
      width: 0%;
      height: 2px;
      background: #f44336;
      display: block;
      margin: auto;
      transition: 1s;    
      }
      .nav-links ul li:hover::after{
      width: 100%;
      }
      nav .fa{
      display: none;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;section class="header"&gt;
          
          &lt;nav&gt;
              &lt;a href="index.html"&gt;&lt;img src="../images/logo.png"&gt;&lt;/a&gt;
              &lt;div class="nav-links" id="navLinks"&gt;  
                  &lt;i class="fa fa-close" onclick="hideMenu()"&gt;&lt;/i&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.html"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="locations.html"&gt;LOCATIONS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="products.html"&gt;PRODUCTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACTS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;i class="fa fa-bars" onclick="showMenu()"&gt;&lt;/i&gt;
          &lt;/nav&gt;
          
          &lt;div class="text-box"&gt;
              &lt;h1&gt;AVEM SALAM&lt;/h1&gt;
              &lt;p&gt;AICI CEVA DESCRIERE&lt;br&gt;YOU KNOW SHORT AND GOOD&lt;/p&gt;
              &lt;a href="products.html" class="hero-btn"&gt;PRODUSELE NOASTRE&lt;/a&gt;
          &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Also, I need some help related to the size of the navbar, how do I make it smaller in terms of height? I did my best to go with &quot;min-height: 7%;&quot; but it is not enough...
  It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
  [![It needs to look smh like this][2]][2]</p>
  <p>[![So this how the navbar currently looks][1]][1]
  [1]: https://i.stack.imgur.com/UVWJg.jpg
  [2]: https://i.stack.imgur.com/BNswb.png</p>