[SOLUCIONADO] [DUDA] Eliminar margenes de botonera

[matiD]

EDIT: Ya arreglé el tema del margen inferior. Ahora me faltan los margenes entre botones. dejo el codigo CSS actualizado ya que el HTML no cambio.

Como están? necesito eliminar los margenes que se ven en la botonera para dejar todos los botones uno pegado al otro y en la parte inferior dejar sin margen entre el nav y la sección id "ordenes"

esta es la imagen no se guíen por los colores y eso es solo para guiarme en la ubicación de las secciones luego cambiaré todo


esto es lo que tengo en html

Código HTML:

<div id="cuerpo">
 
        <header>
            <figure>
                LOGO
            </figure>
            <div id="inicio_sesion">
                <form action="">
                    <input type="text" placeholder="Usuario">
                    <input type="text" placeholder="Contraseña">
                    <input type="submit" value="Ingresar">
                </form>
            </div>
            <nav>
                <ul>
                    <li><a href="#" id="btn_inicio">INICIO</a></li>
                    <li><a href="#" id="btn_servicios">SERVICIOS</a></li>
                    <li><a href="#" id="btn_guias">GUÍAS</a></li>
                    <li><a href="#" id="btn_contacto">CONTACTO</a></li>
                </ul>
            </nav>
        </header>
 
        <section id="ordenes">
            <form action="">
                        <input type="text" placeholder="Nro. Orden">
                <input type="text" placeholder="Contraseña">
                <input type="submit" value="Estado">
            </form>
        </section>
    </div>
 

Y esto es lo que tengo en la hoja de estilos

Código CSS:

a
{
    text-decoration: none;
}
 
header
{
    background: blue;
    position: relative;
    margin-bottom: 0;
    width: 100%;
}
 
header figure img
{
    max-height: 130px;
}
 
nav
{
    background: red;
    position: absolute;
    right: 0;
    bottom: 0;
}
nav ul
{
    list-style: none;
    margin: 0;
 
}
nav ul li
{
    display: inline-block;
}
nav ul li a
{
    background: green;
    color: white;
    display: block;
    padding: 0.5em;
}
 
header #inicio_sesion
{
    position: absolute;
    right: .5em;
    top: .5em;
}
 
#cuerpo
{
    margin: auto;
    width: 1000px;
}
 
#ordenes
{
    background: #A10C0E;
    margin-top: 0;
    overflow: hidden;
}
 
#ordenes form
{
    margin: .5em 0 .5em .5em;
}
 

Bueno la idea es que se vea todo unido todos los botones entre si y la parte inferior unida con la sección ordenes la idea es que parezca un solo bloque con el añadido de los botones en la parte superior.

desde ya muchas gracias por su ayuda!!!

[pzin]

Supongo que con botones te refieres a lo verde.

Simplemente flótalos en lugar de usar ese display:

Código CSS:

nav li {
  /* display: inline-block; No se usa */
  float: left;
}
 

Con eso deberían de solucionarse ambos problemas.

[matiD]

mas que agradecido!!!!!!!