How to adjust this button to align it well with the other objects in the list?

Does anyone know any property of html or css to make the adjustment well?

ul, ol {
    list-style:none;
  }

  .nav > li {
    float:left;
  }

  .nav li a {
    background-color:#000;
    color:#fff;
    text-decoration:none;
    padding:10px 12px;
    display:block;
  }

  .nav li a:hover {
    background-color:#0c6ab0 !important;
     border:6px solid #0c6ab0 !important;

  }
  .nav li a{
     border:2.5px solid #0c6ab0 !important;
  }
  .nav li ul {
    display:none;
    position:absolute;
    min-width:140px;
  }

  .nav li:hover > ul {
    display:block;
  }

  .nav li ul li a {
    position:relative;
    right: 7% !important;
    border:2px solid #0c6ab0 ;
    color:#fff !important;

  }
  .nav li ul li a {
    border:2px solid #131415 !important;

  }
  .nav ul li ul li{
      position:relative !important;
  }

  .nav ul li ul li{
      right: 0px !important;
      top:0px !important;
  }
  .alinea{
 padding: 10px;


  }

'enter the code

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->

<link rel="stylesheet" href="css/colorbox.css">

<link rel="stylesheet" href="css/main.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<div class="barra">
    <div class="contenedor clearfix">
        <div class="logo">
            <a href="index.html">
                    <img src="img/logo.svg" Style= "position:absolute;left:20px; top:0px; width:90px; height:90px;">
                </a>
        </div>

        <div class="menu-movil">
            <span></span>
            <span></span>
            <span></span>
        </div>

           <nav class="navegacion-principal clearfix">
            <div class="mover">
            <a href="servicio.php">Formulario</a>
            <a href="conferencia.html">Registros</a>
            <a href="calendario.html">Excel</a>
            <a href="invitados.html">Facturas y tickets</a>
             <ul class="nav margen"><li> <a href="registro.html">Agendas</a>
             <ul>
                <li> <a class="va" href="registro.html">Vehiculos</a></li>
                <li> <a href="registro.html">Proveedores</a></li>
             </ul></li>
           </ul>
        </div>
        </nav>

    </div>

    <!--.contenedor-->
</div>

            </div>
            <!--.informacion-evento-->

        </div>
    </div>

    <!--.hero-->
</header>

'