CSS - Position: relative; VS Position: Absolute;

Question

Good evening guys I’m having a problem in a matter of leaving my site Responsive. What happens is the following...

I have my menu, which contains 2 LI "ADD VALUE" , "ROUTINE". And I want to make them responsive, NAV in which they are, I managed to leave responsive by adding the Position: relative;, however when I reduce browser resolution only the NAV stay Responsive, my LI, do not redeem.

Red borders are to illustrate where CSS is affecting.

I’ve tried to put Position: relative; in the UL us LI, tried to put too Position: Absolute;, but nothing helped, my LI still not redeeming with browser resolution.

Man html code is as follows :

<nav id="menu">
    <ul>
        <li><a href="salario.html">Adicionar Valor</a></li>
        <li><a href="rotina.html">Criar Rotina</a></li>
    </ul>   
</nav>

Man css code is this way:

body{
background-color: #e6a017;
margin:0;
padding:0;
}
nav{

background-color: white;
top: -16px;
position: relative; 

}

nav a{
text-decoration: none;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bolder;
}
nav a:hover{
color: white;
}
nav ul{
border: 8px solid red;
list-style: none;
text-transform: uppercase;  
right: -980px;
position: relative;
display: block;


}
nav li{

display: inline-block;
padding: 10px;  
margin-right: 10px;

}
nav li:hover{
background-color: #e6a017;
transition: 1s;

}

RESOLVED

I swapped the css code line "right: -980px;" of Nav ul{} for "text-align: right;"

Answer 1

You’re pulling the list right with right: -980px;, what is wrong, causing her to leave the Nav area. To do something responsive, you will rarely use dimensions with px (usually in elements with fixed sizes or that may vary at certain breakpoints), and will use more %, em or rem. But the real issue is this negative right of 980px, which makes no sense and has nothing to do with responsiveness.

If you want to align the li’s from the list to the right, just use text-align: right:

body{
background-color: #e6a017;
margin:0;
padding:0;
}
nav{

background-color: white;
top: -16px;
position: relative; 

}

nav a{
text-decoration: none;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bolder;
}
nav a:hover{
color: white;
}
nav ul{
border: 8px solid red;
list-style: none;
text-transform: uppercase;  
/*right: -980px;*/
text-align: right; /* aqui alinha o texto para a direita*/
position: relative;
display: block;


}
nav li{

display: inline-block;
padding: 10px;  
margin-right: 10px;

}
nav li:hover{
background-color: #e6a017;
transition: 1s;

}

<nav id="menu">
    <ul>
        <li><a href="salario.html">Adicionar Valor</a></li>
        <li><a href="rotina.html">Criar Rotina</a></li>
    </ul>   
</nav>