De forma muy explicita estamos diciendo que
"La sección que esta al lado derecho de mi barra de navegación"
Lo que hicimos fue agregarle una clase a la etiqueta <ul>
para poder agregarle estilos desde el archivo.css
<nav>
<ul class="nav-right-section">
<li>
<a href="#">Gmail</a>
</li>
<li>
<a href="#">Imagenes</a>
</li>
<li>
<a href="#">Icon</a>
</li>
<li>
<a href="#">Photo</a>
</li>
</ul>
</nav>
body {
margin: 0;
padding: 0;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none; */Quitar todos los estilos en CSS
cursor: pointer; */Para que en la pantalla salga el curso del mouse
}
header {
width: 100%;
height: 60px;
}
header nav {
display: flex;
justify-content: flex-end;
height: inherit;
}
header nav .nav-right-section {
width: 250px;
height: auto;
display: flex;
list-style: none; */Quitar los puntos de la lista en CSS
justify-content: center;
align-items: center;
}
nav .nav-right-section a {
margin-right: 10px; */La separacion que esta en nuestra lista
color:black
}