body{
    text-align: center;
    background-color:#d2f0ec;
}

header{
    background-color: white;
    display:flex;
    flex-direction:row;
    align-content:space-around;
    align-items: center;
    text-decoration: none;
    margin: auto;
    
}


#botonera {
    background-color:white;
    margin: left;
}

#botonera a {   
    display: block; 
    color:black;
    text-decoration: none;
}

#botonera .menu {
    margin: 0;
    display: flex;
    justify-content:flex-start;
}

#botonera .menu > li:hover > a + ul {
    display: block;
    
}

#botonera .menu > li > a {
    /** ok.. no pusiste margin: "tanto" why? creo que tengo un mal concepto de margin margin es un margen externo, lo que ocupe un elemento con su margen no es el elemento en sí. si en los (a) en vez de haber puesto padding hubiera puesto margin, habría pasado lo mismo (eso que te edcía de que solo el texto funcionaría como link y elbton perderia sentido) **/
    padding: 1em 2em;
}

#botonera .menu > li > a:hover {
    background-color:#bbe0ff;
}

#botonera .menu ul {
    padding: 0;
    position: absolute;
    display: none;
}

#botonera .menu ul > li > a {
    padding: 0.7em 2em;
    background-color:#ebfad7;
}

#botonera .menu ul > li > a:hover {
    background-color:#bbe0ff;
}
                   
    
    




h1, h2, h3{
    font-family: sans-serif;
}

h2{
    font-size: 22px;
}

h3{
    font-size: 15px;
    width: 400px; 
    margin: auto; 
}

li{
    font-family: sans-serif;
}

.menu{
    text-align: right;
    float: right; 
}