How can i adjust images , unordered list and buttons in html and css-CodePudding

i am trying to adjust 1 picture , home link , tags link and a sign in button on a navbar , what can i do to correct it as the following problem is happening as shown in pic . Below that is the html and css code . i want the navbar to look like stackoverflow [

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div >
   <img src="background.png" >
   <nav>
     <ul >
       <li><a href='#' >Search</a></li>
       <li><a href='#' >Browse</a></li>
       <li><a href='#' >Tags</a></li>
       <li><a href='#' >Filter</a></li>
       <li><a href='#' >Dev</a></li>
     </ul>
    </nav>
    <div ><a href="#" class='sign'>Sign In</a</div>
 </div>
</body>
</html>

*{
  margin: 0px;
  padding: 0px
}

.navlist{
  list-style: none ;
  display: flex ;
  background: red ;
  padding: 0px ;
  margin: 0px auto ;
  width: 477px ;
  top: 55px ;
  position: relative;
}

.bar{
  height:100px ;
  justify-content: center ;
  box-shadow: 0px 2px 5px
  
}

.link1{
  margin-left: 30px;
  text-decoration: none ;
  color: black ;
  font-size: 20px
}

.signin{
  background:blue ;
  height: 35px ;
  width: 100px ;
  left: 950px ;
  position: relative;
  text-align: center ;
  font-size: 18px ;
  border-radius: 15% ;
  
}

.sign{
  top: 15% ;
  position: relative;
 color: white ;
 text-decoration: none
}

ps: that red background for the navlist div is just for seeing the extent of margin

CodePudding user response：

What you can do is to create a table, create a row in it and add all these elements in different cells of the same row. But this is not suggested if you think to publish your webpage. What I recommend here is to use display: grid; You would need to see documentation of CSS grids on w3schools. However, if you know about it already, here's how it would work (CSS):

.bar{
   display: grid;
   grid-template-columns: 100px auto 80px;
   height: auto;
}

and you are done. Now you just need to align the items vertically.