Align items in navbar with searchbar

Question

I'm learning css and I want a custom navbar where I want to do something like this:

So I create the navbar item and inside it each element separately. Problem is my social media icons not in the same line as the search bar.

There is my code example of what am I doing

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

#product-overview {
    background-color: #ff1b68;
    width: 100%;
    height: 528px;
    padding: 10px;
}

.section-title{
    color: #2ddf5c;
    }

#product-overview h1{
    color:white;
    font-family: 'Anton', sans-serif;
}

.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding:8px 16px;
}

.main-header > div{
    vertical-align: middle;
}

.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar{
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}
.main-nav{
    width: 50%;
    text-align: right;
}

.main-nav__items{
display: flex;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
    display: inline-block;
}

.main-nav__social{
    display:block;
    width: 20px;
    height: 20px;
}

<header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a></div><nav class="main-nav">
                    <div><input type="text" placeholder="search" class="main-nav__searchbar"></div>
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <img class="main-nav__social" src="social-media__icons/facebook.svg" alt="facebook">
                    </li>
                    <li class="main-nav__item">
                        <img class="main-nav__social" src="social-media__icons/instagram-bosquejado.svg" alt="facebook">
                    </li>
                </ul>
            </nav>
        </header>

Someone can tell me what is wrong with spaces inside my box? Regards

Answer 1

You need to add display: flex; to the .main-nav to make the direct children of the .main-nav (which are the div that contains the search bar and the ul that contains the social media icons) aligned in the same line

try this code:

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

#product-overview {
    background-color: #ff1b68;
    width: 100%;
    height: 528px;
    padding: 10px;
}

.section-title{
    color: #2ddf5c;
    }

#product-overview h1{
    color:white;
    font-family: 'Anton', sans-serif;
}

.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding: 16px;
}

.main-header > div{
    vertical-align: middle;
}

.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar_container {
  display: flex;
  width: 100%;
}

.main-nav__searchbar{
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-nav{
  display: flex;
  width: 100%;
  text-align: right;
  margin: 0 10px;
}

.main-nav__items{
display: flex;
margin:0;
padding:0;
list-style: none;
}
.main-nav__item{
    display: inline-block;
}

.main-nav__social{
    display:block;
    width: 20px;
    height: 20px;
    margin-left: 10px
}

<header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a>
                </div>
                
                <nav class="main-nav">
                    <div class="main-nav__searchbar_container">
                    <input type="text" placeholder="search" class="main-nav__searchbar">
                    </div>
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <img class="main-nav__social" src="social-media__icons/facebook.svg" alt="facebook">
                    </li>
                    <li class="main-nav__item">
                        <img class="main-nav__social" src="social-media__icons/instagram-bosquejado.svg" alt="facebook">
                    </li>
                </ul>
            </nav>
        </header>