How to I align my icons in the navbar in css react?-CodePudding

I'm pretty new to css and my navbar looks really bad. I'm trying to play with the css but i get nothing better than the below picture. If i remove the .menu, icons get verticaly aligned;

Of course i've seen a lot of stackoverflow post on this topic and tryied lot of stuff, but again, could not get better than the below picture.

Here my react html code.

      <ul className="menu">
      <li>
            <a href="https://discord.com/channels/@me"  id="menu-item-41">
              <img src={Discord} alt="discord" className="discord-logo"/>
            </a>
            </li>
            <li>
            <a href="www.twitter.com" className="page-scroll" id="menu-item-42">
              <img src={Twitter} alt="twitter" className="twitter-logo"/>
            </a>
            </li>
            <li>
            <a href="#" className="page-scroll" id="menu-item-44">
              TAG
            </a>
            </li>
            <li>
            <a href="#roadmap-title" className="page-scroll" id="menu-item-43">
              ROAD MAP
            </a>
            </li>
            <li>
            <a href="#team" className="page-scroll" id="menu-item-45">
              TAG2
            </a>
            </li>
            <li>
              <button onClick={() =>  this.connect() }
                id="menu-item-47"
              className="connect-button">CONNECT 
              </button>
            </li>

        </ul>

Here my css :

li.menu-item { 
  margin-bottom: 40px;
  vertical-align: middle; 
  text-align: center; 
}

.menu{
  position: left;
  display: inline-flex;
  text-align: center;
  vertical-align: middle;
  float: left; 
  margin: 40;
  }

Eny suggestions or observation would be super welcomed !

CodePudding user response：

Try changing your css to this

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}