Olá.
Comecei a estudar front-end development recentemente(praticamente ontem) e estou tendo alguns problemas com CSS. Sou horrível com posicionamento das coisas, e o que me deixa furioso é que consigo fazer algumas gambiarras para deixar os elementos/itens bem posicionados na tela full, mas quando eu diminuo ela, os itens começam a sair do lugar, das caixas, dos headers etc. Fica tudo extremamente zuado.
Segue abaixo meu código e como ficou o menu.
obs: a classe "menu" está dentro da classe "containertopo".
*
{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.containertopo
{
position: relative;
width: 100%;
height: 79px;
background-color:deepskyblue;
opacity: 0.5;
}
.containertopo img
{
width: 99px;
float: left;
margin-left: 17%;
}
.menu
{
display: inline-block;
}
.menu ul
{
margin-left:4em;
}
.menu ul li
{
display: inline-block;
margin: 2em;
}