I can't change the position of these elements - html

Question

I would like to change the position of these buttons inside my navbar, also I would like you to tell me if it's correct what I'm doing in my CSS. the main idea is that I wanted to make a navbar, just I wonder to know if it's right how I did it.
Note: About the position of the buttons, as you can see I set 20 px to the margin button(before I set a position relative), but as you can see nothing happen.I would like to move the buttons more to the top.
Another doubt that I've got now, is how do I have to move, the <a> tags or the <li> or both?
Thanks!
body {
background-color: #fcf2e5;
margin: 0;
}
nav {
background-color: #beb8a4;
height: 120px;
}
.menu {
padding-left: 380px;
}
/* Nav Buttons */
.menu li {
display: inline;
font-family: sans-serif;
font-size: 1.2em;
padding-left: 40px;
text-decoration: none;
}
.navButtons {
text-decoration: none;
color: black;
}
.navButtons:hover {
color: #a52929;
}
/*I don't know if it's correct what I'm doing here below*/
ul,
li,
a {
display: inline;
position: relative;
margin-bottom: 20px;
}
/* Logo */
header nav a img {
margin-top: 20px;
margin-left: 22px;
}
<header>
<nav>
<a href="#">
<img src="Images/logo.png" title="Home" alt="Logo" />
</a>
<ul class="menu">
<li>Quienes Somos
</li>
<li>Muestras y Acabados
</li>
<li>Ubicación
</li>
<li>Contáctenos
</li>
</ul>
</nav>
</header>

Answer 1

Most navbars look a little like this these days. Very little markup and a bit of CSS to make it looks nice.
I've used flexbox for positioning. You can position things at the top bottom or centre using this method.
It's also using media queries, this is so it can cope with a small screen (which the snippet will have) press full screen to swap between its states.
body {
background-color: #fcf2e5;
margin: 0;
}
/* Start of navbar */
nav {
background-color: #beb8a4;
display: flex;
padding: 15px 0;
height: 100%;
align-items: center;
justify-content: space-around;
}
/* Nav buttons */
.navButtons {
font-family: sans-serif;
font-size: 1.2em;
text-decoration: none;
color: black;
}
.navButtons:hover {
color: #a52929;
}
/* Small screen support */
#media only screen and (max-width: 640px) {
nav {
flex-direction: column;
}
.navButtons {
text-align: center;
font-size: 1.6em;
max-width: 180px;
margin-top: 10px;
}
}
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/BBC_America.svg/100px-BBC_America.svg.png" title="Home" alt="Logo" />
About us
Samples and Finishes
Find us
Contact us
</nav>
Hope you find this helpful.