如何在导航栏中的图像之间添加空格？

Question

无法正确对齐导航栏图像。 使用引导程序。 试过很多次。 这是我的代码和页面的图片。

 <body>
  <header id="header" class="fixed-top">
    <nav class="navbar navbar-expand-lg bg-img navigation-wrap">
        <div class="container">
            <div class="logo lahore">
          <a class="navbar-brand" href="#"><img src="img/TOL Logo-Black@2x.png"></a>
            </div>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
              <li class="nav-item">
                <a class="nav-link" href="#services"><img 
              src="img/navbar/SERVICES.png"></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#lahore"><img src="img/navbar/LAHORE.png"> 
               </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#menu"><img src="img/navbar/JOIN OUR 
             TEAM.png"></a>
              </li>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact_us"><img src="img/navbar/CONTACT 
             US.png"></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
  </header>
  </body>

在此处输入图像描述- 这是我的代码

下面附上另一页它应该是什么样子。

在此处输入图像描述

我究竟做错了什么？

Answer 1

使用容器流体文本中心