One member of a list higher than the other-CodePudding

I am trying to create a navbar in my site, but every time I try to align the logo to the left the page selection is put higher, anyone have a solution?

Screenshot:

This is the html code:

  <div >
    <ul >
      <li >
        <img src="images/logo1.png" alt="IM2B - Play your brand">
      </li>
      <li >
        <a  href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </li>
    </ul>
  </div>

This is the css code:

.NavBar {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  padding: 20px;
}

.NavBar .Items {
  margin: auto;
  width: 60%;
  text-align: center;
  list-style: none;
}

.NavBar .Logo {
  float: left;
}

.NavBar .Links {
  display: inline-block;
  padding: 0px 16px;
}

.NavBar .Links a {
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.NavBar .Links a:hover {
  background-color: #ddd;
  color: black;
}

.NavBar .Links a.active {
  background-color: #04AA6D;
  color: white;
}

CodePudding user response：

ADD flex property to your outside navitems' containers

 .NavBar .Items {
                margin: auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
                /* width: 60%; */
                text-align: center;
                list-style: none;
            }


.NavBar .Links {
                border: 2px solid white;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

CodePudding user response：

Is this you were looking for? Look, there are 2-levels of display:flex for alignments.

* {margin:0; padding:0; box-sizing:border-box;}

.NavBar {
  list-style-type: none;
  background-color: #333;
  padding: 10px;
}

ul li {list-style-type:none;}

.NavBar .Items {
  display:flex;
  justify-content: space-around;
}

.NavBar .Links {
  display:flex;
}

.NavBar .Links a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 17px;
  padding:10px 20px;
  display:inline-block;
  height:40px;
  align-self:center;
}

.NavBar .Links a:hover {
  background-color: #ddd;
  color: black;
}

.NavBar .Links a.active {
  background-color: #04AA6D;
  color: white;
}

img {height:60px;width:100px;}

  <div >
    <ul >
      <li >
        <img src="https://picsum.photos/200/300" alt="IM2B - Play your brand">
      </li>
      <li >
        <a  href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </li>
    </ul>
  </div>