How to center the logo, while having the elements near it?

Question

       .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;
    }

    <section class="header">
        
        <nav>
            <a href="index.html"><img src="../images/logo.png"></a>
            <div class="nav-links" id="navLinks">  
                <i class="fa fa-close" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="locations.html">LOCATIONS</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="contact.html">CONTACTS</a></li>
                </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu()"></i>
        </nav>
        
        <div class="text-box">
            <h1>AVEM SALAM</h1>
            <p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
            <a href="products.html" class="hero-btn">PRODUSELE NOASTRE</a>
        </div>
    </section>

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 "min-height: 7%;" 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]

[![So this how the navbar currently looks][1]][1] [1]: https://i.sstatic.net/UVWJg.jpg [2]: https://i.sstatic.net/BNswb.png

Answer 1

Your DOM order is wrong, try this HTML

   <section class="header">
        
        <nav>
            <div class="nav-links" id="navLinks">  
                <i class="fa fa-close" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>

                </ul>
            </div>
            <a href="index.html"><img src="../images/logo.png"></a>
            <div class="nav-links" id="navLinks">  
                <i class="fa fa-close" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="locations.html">LOCATIONS</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="contact.html">CONTACTS</a></li>
                </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu()"></i>
        </nav>
        
        <div class="text-box">
            <h1>AVEM SALAM</h1>
            <p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
            <a href="products.html" class="hero-btn">PRODUSELE NOASTRE</a>
        </div>
    </section>