why are my nav bar and search bar not in the same line even after keeping both 50%

Question

I am trying to make a website. I had coded the nav bar earlier with the search bar and they were on the same line, but then I tried to increase the size of nav links, but instead increased the width of entire nav bar by mistake, due to which my search bar dropped down. then I changed the code back to what it was but still my search bar isnt going up. how to align them again?

i am using html+css, it is my first website.

this is my code. how to fix this?

.logo{
    width:50%;
    display: flex;
    align-items: center;

}

.logo img{
    width: 40px;
    min-height: 40px;
    border: 3px solid white;
    border-radius: 150px;
}

}
.navbar{
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
}
.nav-list {
    width: 50%;
    /*background-color: black;*/
    display: flex;
    justify-content: left;
    align-items: center;
    margin-right: 0;
}

.nav-list li{
    list-style: none;
    padding: 26px 30px;
}

.nav-list li a{
    text-decoration: none;
    color: white;
}

.nav-list li a:hover{
    color: gray;
}

.rightNav{
    width: 50%;
    /*background-color: black;*/
    text-align: right;
    padding: 0 23px;
    display: flex;
}

#search{
    padding: 5px;
    font-size: 17px;
    border: 2px solid gray;
    border-radius: 9px;
}

.background{
    background: rgba(0, 0, 0, 0.7) url(../img/bg.jpg);
    background-size: cover;
    background-blend-mode: darken;
}

<nav class="navbar background">
        <ul class="nav-list">
            <div class="logo">
                <img src="img/img.jpg" alt="logo">
            </div>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Blogs</a></li>
            <li><a href="#connect">Connect</a></li>
        </ul>
        <div class="rightNav"> 
            <input type="text" name="search" id="search">
            <button class="btn btn-sm">Search</button>
        </div>
    </nav>

score 0 · Accepted Answer · answered Sep 01 '21 at 01:42

It is because you are wrapping nav-links in ul and by default ul have some margin-bottom. You just have to remove the margin-bottom to center align both ul and .rightNav

ul{
    margin-bottom: 0;
}

.logo {
  width: 50%;
  display: flex;
  align-items: center;
}

.logo img {
  width: 40px;
  min-height: 40px;
  border: 3px solid white;
  border-radius: 150px;
}


}
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  cursor: pointer;
}
.nav-list {
  width: 50%;
  /*background-color: black;*/
  
  display: flex;
  justify-content: left;
  align-items: center;
  margin-right: 0;
}
.nav-list li {
  list-style: none;
  padding: 26px 30px;
}
.nav-list li a {
  text-decoration: none;
  color: white;
}
.nav-list li a:hover {
  color: gray;
}
.rightNav {
  width: 50%;
  /*background-color: black;*/
  
  text-align: right;
  padding: 0 23px;
  display: flex;
}
#search {
  padding: 5px;
  font-size: 17px;
  border: 2px solid gray;
  border-radius: 9px;
}
.background {
  background: rgba(0, 0, 0, 0.7) url(../img/bg.jpg);
  background-size: cover;
  background-blend-mode: darken;
}
ul {
  margin-bottom: 0;
}

<nav class="navbar background">
  <ul class="nav-list">
    <div class="logo">
      <img src="img/img.jpg" alt="logo">
    </div>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Blogs</a></li>
    <li><a href="#connect">Connect</a></li>
  </ul>
  <div class="rightNav">
    <input type="text" name="search" id="search">
    <button class="btn btn-sm">Search</button>
  </div>
</nav>

why are my nav bar and search bar not in the same line even after keeping both 50%

1 Answers1