Problema CSS com *:not(ul)

[Victor Ferreira França]

Boa tarde pessoal sou novo nesta parte de programação web e estou desenvolvendo um website, mas surgiu um pequeno problema agora no css.
Eu estava fiz uma tabela <ul> para criar uma barra de navegação horizontal(Que fica em cima da tela)
O codigo é este:

<ul>
	<li><a href="">Inicio</a></li>
	<li><a href="">Máterias</a></li>
	<li><a href="">Gnosi Ask</a></li>
	<li><a href="">Contato</a></li>
	<li style="float:right"><a class="active" href="">Login</a></li>
	<li><a href="">Lingua</a></li>
	<li><a href="">Pesquisar</a></li>
	</ul>

Então fiz a parte CSS:

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #dddddd;
	overflow: hidden;
	background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}

Mas então comecei a fazer a parte do website e adicionei na  body { } o comando :

max-width: 1200px;
    margin: auto;
O problema é que quando eu digito isto a barra também diminui, e eu quero saber se tem como abrir uma exceção para ele não diminuir a barra de navegação.

[DiF]

@Victor Ferreira França Olá,  seria interessante você postar algum print do problema.. mesmo você descrevendo não consegui captar de qual barra você está falando.

[Victor Ferreira França]

Link do print:

https://prnt.sc/fu4bgw
 

Então eu usei o max-width para poder deixar aquele texto do site próximo do centro, mas toda vez que coloco o codigo a barra vai junto para o centro retirando a parte "LOGIN" dela.

[DiF]

@Victor Ferreira França Mas o que você quer fazer?

Colocar o botão login junto com os campos e centralizar o formulário, além da barra de menu ocupar toda a tela na parte de cima?

 

[Victor Ferreira França]

@DiF Eu quero que todo o conteúdo do site fique centralizado, Menos a barra.
Então para centralizar o conteúdo eu usei: max-width , o problema é que quando eu coloco a barra também vai para o meio (O que eu não quero que aconteça).

[DiF]

@Victor Ferreira França

Então,  pelo que eu vi ali, a estrutura está meio errada.

Você colocou o botão de login junto no menu,  os campos de usuário e senha separado..  E o emprego do max-width está errado.

 

Se você quer centralizar, use o margin "zero" auto

 

Exemplo:

 

A barra de menu você deixa ela com width 100% e cria uma nova estrutura a baixo a nível de bloco e centraliza.

 

<div class="barraMenu">
    aqui você põe a sua estrutura do menu
</div> 

<div id="conteudo">
  
    aqui vai o resto centralizado.
</div>  

 

Veja um exemplo simples online: https://jsfiddle.net/ovLc3pj5/

[Victor Ferreira França]

@DiF Cara muito obrigado mesmo!
Tava já desistindo de fazer isto.

Estou iniciando na programação web e ainda vai surgir muitas duvidas.
Você recomenda algum site, livro, videos etc... que possa me ajudar a aprender mais?
Obrigado dnv!

[DiF]

@Victor Ferreira França Antes de tudo, tenha perseverança!

Na programação, sempre vai haver muito estudo e novos aprendizados, portanto não desista! Isso vale para tudo até para seus sonhos.

 

Posso indicar os sites que conheço como o Codeacademy, W3school, o youtube dentre outros que não me vem na cabeça agora.

 

Sobre livros, você pode encontrar os do Maurício Samy "maujor"  Silva. Para eu, é um dos melhores escritores brasileiros sobre HTML, CSS e jQuery.

 

Tenho alguns livros dele, e pretendo completar minha coleção. Em especial recomendo para inicio de estudo o Construindo sites com CSS e (X)html  este é bem didático e ensina bem os princípios básicos da estrutura html e css, além de vários exemplos.

 

Depois você pode comprar o HTML 5 e CSS3  ambos também do Maurício samy silva pela editora Novatec. 

Embora seja um pouco salgado o preço, vale muito a pena.