Solucionado
header {
background: #bbbbbb;
padding: 20px 0;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
top: 110px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
Olá Caio, tudo bem?
O que instrutor quis dizer é que para o formato desktop (notebook), a tela possui aproximadamente uma largura de 1100... 1200 pixels, sendo assim, a comunidade costuma adotar, por padrão, 940px de largura para o conteúdo da página, a fim de que se tenha um espaço adequado para as margens laterais, que se encaixará entre os 940px do conteúdo e os 1200 pixels da tela. Explicarei melhor a seguir!
O valor de 940px foi adicionado a width na caixa com a intenção de que o conteúdo interno ficasse centralizado.
O efeito centralizado só é construído se esse elemento que irá se dispor ao centro for menor que o espaço que ele pode ocupar. Caso contrário, ele ocupará totalmente e não ficará centralizado. Veja:
Sabendo que a página tem por padrão aproximadamente 1200px de largura, ou seja, 1200px de espaço disponível para um elemento ocupar e como gostaríamos que o conteúdo não ocupe totalmente essa largura, o que irá gerar o efeito centralizado, é necessário que esse conteúdo tenha um valor em px menor do que o padrão da página.
Esse valor menor em px são os
940pxaplicados na.caixa.
Espero ter ajudado, em caso de dúvidas ou dificudades. Estamos por aqui!
o meu padrão está como 1507px, então o 940px fica muito ao meio. Qual a solução para larguras fora do padrão?
Olá Eder, tudo bem?
Você pode utilizar a proporção de 80-85% do tamanho, então se a sua tela é 1507px, você pode utilizar width: 1205px ou simplesmente colocar width: 80%, pois a vantagem de utilizar a porcentagem é que independente do tamanho da tela, ela manterá esse padrão de 80%.
Espero ter ajudado, abraços!
Obrigado Beatriz, muito legal saber disso! Ajudou demais