Here is a image I of navbar. I want to make it center

And here is a html and css of the image:

.login{
    flex-direction: row;
    margin: 24px 0 12px 0;
    display: flex;
    height: 60%;
    justify-content: center;
    align-items: center;

        <!--LOGIN-->
        <div >

            <img src="C:\Users\przem\Projekty\strona-task\img\login.png" alt="Avatar" >
        
        </div>

It's one of my first project, and I'm still beginner, so please explain this like I could be 5.

*{
    margin: 0;
    
    font-family: 'Roboto', sans-serif;
}


.base{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(311.76deg, #D4E7FE -15.24%, #FFFFFF 78.85%);
    background-position:center;
    background-size:contain;
    box-sizing: border-box;

}
.navbar{
    position:fixed;
    background: linear-gradient(311.76deg, #D4E7FE -15.24%, #FFFFFF 78.85%);
    background-position:center;
    background-size:contain;
    color: black;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 80px;
}
.linki ul{
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.linki li{
    align-items: center;
    padding-left: 5%;
    display: flex;
    justify-content: space-between;

}
.logo{
    display: flex;
}
.ikonka{
    width: 30%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    
}
.ikonka h2{
    left: 35px; 
    width:fit-content;
    display: flex;

}
.linki{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul#horizontal-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 300px;
    list-style:none;
    align-items: center;
    height: 100%;
}
form{
    width: 80px;
    height: 14px;
    display: flex;
    flex-direction: row;
    align-items:flex-end;
}
button {
    all: unset;
    cursor: pointer;
    max-width: 44px;
    max-height: 44px;
  }
.path1{
    max-width: 18px;
    max-height: 18px;
  }
  form {
    height: 60%;
    width: 200px;
    display: flex;
    flex-direction: row;
    border: 3px solid #f1f1f1;
  }
.search-button{
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.login{
    flex-direction: row;
    margin: 24px 0 12px 0;
    display: inline-flex;
    height: 60%;
    justify-content: center;
    align-items: center;
}

<div class=navbar>
    <div >
        <img src="C:\Users\przem\Projekty\strona-task\img\ikona.png" >
        <h2>Netbook</h2>
    </div>
      <div >
        <!--LINKI-->
    <ul id="horizontal-list">
      <li><a style="text-decoration:none;color:#000000;" href="https://www.w3schools.com">Home</a></li>
      <li><a style="text-decoration:none;color:#aeaeae;" href="https://www.w3schools.com">Community</a></li>
      <li><a style="text-decoration:none;color:#aeaeae;" href="https://www.w3schools.com">Blog</a></li>
      <li><a style="text-decoration:none;color:#aeaeae;" href="https://www.w3schools.com">Events</a></li>
    </ul>
      </div>
      <!--wyszukiwanie-->
      <div >
        <form id="form"> 
          <button><img  src="C:\Users\przem\Projekty\strona-task\img\1024px-Search_Icon.svg.png"></img></button>
          <input type="search" id="query" name="q" placeholder="Search...">
        </form>
      </div>
        <!--LOGIN-->
        <div >

            <img src="C:\Users\przem\Projekty\strona-task\img\login.png" alt="Avatar" >
        
        </div>
  </div>

CodePudding user response：

The div's class name is Login and you wrote login in your CSS file. Just changed that and it will work