Html 对齐所有导航菜单项的文本

我的网站上有一个菜单没有对齐

图画

如何将导航菜单的所有文本与右侧蓝色按钮的文本对齐？我已经尝试了下面的代码，但似乎不正确

HTML

  <nav class="navbar bg-color3">
  <div class="container-fluid">
    <a href="#"><img src="/Content/images/uploads/photo-01.png" width="410" alt="PG Portal de Gastos" style="float: left; margin: 18px 10px 10px 0;"></a>
    <button class="round-toggle navbar-toggle menu-collapse-btn collapsed" data-toggle="collapse" data-target=".navMenuCollapse">
      <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navMenuCollapse">
      <div class="login-panel">
        <ul id="nav-list" class="nav pull-right">
          <li><a href="#intro-center-image" class="btn btn-default goto" style="border: 1px solid transparent;">Inicio</a></li>
          <li><a href="#benefits-grid-num-2" class="btn btn-default goto" style="border: 1px solid transparent;">Beneficios</a></li>
          <li> <a href="#benefits-grid-images" class="btn btn-default goto" style="border: 1px solid transparent;">Funcionalides</a></li>
          <li><a href="#price-3col" class="btn btn-default goto" style="border: 1px solid transparent;">Planes</a></li>
          <li><a href="#contact-full" class="btn btn-default goto" style="border: 1px solid transparent;">Contacto</a></li>

                                <li class="sub-menu-parent">
                                    <a class="btn " href="#">Iniciar Sesión <i class="icon right-icon icon-login"></i></a>
                                    <ul class="sub-menu">
                                        <li>
                                                <a class="btn btn-primary" style="border: 1px solid transparent;" href="@Url.Action("Login", "Cuenta")">
                                                    Portal 
                                                </a>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary" style="border: 1px solid transparent;" href="http://web.com/">
                                                Portal
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <a class="btn btn-primary" href="@Url.Action("Registrar", "Cuenta")">
                                    Iniciar Prueba<i class="icon right-icon icon-download"></i>
                                </a>
                            </ul>

    </div>

                    </div>
                </div>
            </nav>

问题在于.navbar.login panel.btn类的填充。如果删除此处的填充（填充：0 20px；），则文本将水平排列。如果您希望菜单其余部分的填充为每个类创建特定的填充。

您必须删除

.navbar.nav li上的
填充：

.navbar .nav li {
    padding:0;
    float:left;
}

目前有一个
padding:5px
导致按钮周围出现间隙。
使用
padding
而不是
height
（调整padding-bottom和padding-top以解决高度问题）
在蓝色和白色空间中尝试