Duvidas sobre HTML

Front-end
#1

Bem, estou tendo um problema onde que, quando eu mudo o tamanho do navegador, os itens da pagina usam como referencia o tamanho do navegador e quando eu movo a rolagem da pagina para a direita, os elementos estão cortados, vou deixar uma imagem aqui em baixo e o codigo css:

Captura%20de%20Tela%20(30)
Captura de Tela (30).png694×390 14 KB 

@charset "UTF-8";
body {
	background-color: #dddddd;
	width: 100%;
	height: 100%;
	overflow: visible;
}
header {
	width: 100%;
	height: 200px;
	
	padding: 10px;
	margin: -10px 0px auto -8px;
	position: relative;
	
	white-space: nowrap;
	
	background-color: rgba(0,0,255,0.5);
}
h4 {
	margin-top: 0px;
	font-size: 140px;
	position: absolute;
}
nav {
	background-color: rgba(255,0,0,0.5);
	position: absolute;
}
ul {
	margin: 0px;
	position: relative;
	background-color: rgba(127,127,0,0.5);
}
header nav#menu_superior {
	width: 100%;
	height: 40px;
	
	bottom: 0px;
	margin-left: -10px;
}
header nav#menu_superior li.menu {
	display: inline-block;
}
li.menu {
	height: 30px;
	padding: 5px;
	list-style-type: none;
	
	background-color: green;
}
a {
	text-decoration: none;
	font-size: 27px;
	color: #6f6f6f;
	background-color: rgba(127,127,127, 0.5);
}
div#menu_lat {
	margin-left: -8px;
}
div#menu_lat nav#menu_lateral {
	margin-top: 0px;
	margin-left: -40px;
	margin-bottom: 0px;
	top: 218px;
}
div#menu_lat nav#menu_lateral ul li.menu {
	display: block;
	margin-bottom: 2px;
}
div#corpo {
	padding: 10px;
	margin: 2px -12px 2px 179px;
	background-color: blue;
}
div#tudo {
	width: 100%;
}
div#rodape {
	background-color: rgba(0,0,255,0.5);
	margin: 0px -12px 0px -8px;
	padding: 12px;
}
footer {
	bottom: 0px;
}

O HTML está logo a baixo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8"/>
	<title>Interface da Página Web</title>
	<link rel="stylesheet" href="estilo.css"/>
</head>

<body>
	<div id="tudo">
		<header>
			<h4>Minha Pagina</h4>
			<nav id="menu_superior">
				<ul>
					<li class="menu"><a href="" target="_blank">Menu</a></li>
					<li class="menu"><a href="" target="_blank">Lazer</a></li>
					<li class="menu"><a href="" target="_blank">Estudos</a></li>
				</ul>
			</nav>
		</header>
		<div id="menu_lat">
			<nav id="menu_lateral">
				<ul>
					<li class="menu">Lazer</li>
					<ul>
						<li class="menu"><a href="" target="_blank">Jogos.io</a></li>
						<li class="menu"><a href="" target="_blank">Animes</a></li>
						<li class="menu"><a href="" target="_blank">Mangás</a></li>
						<li class="menu"><a href="" target="_blank">Wallpapers</a></li>
					</ul>
					<li class="menu">Estudos</li>
					<ul>
						<li class="menu"><a href="" target="_blank">Informações</a></li>
						<li class="menu"><a href="" target="_blank">Aulas</a></li>
						<li class="menu"><a href="" target="_blank">Apostilas</a></li>
						<li class="menu"><a href="" target="_blank">Duvidas</a></li>
					</ul>
				</ul>
			</nav>
		</div>
		<div id="corpo">
			Conteudo
		</div>
		<div id="rodape">
			<footer>
				Meu Rodape
			</footer>
		</div>
	</div>
</body>
</html>
#2

Faltou postar o HTML.

#3

Pronto

#4

Só para avisar, eu ainda não consegui resolver problema, se houver alguém que não tenha visto e saiba resolver, se possivel dizer logo a baixo por favor.

#5

Retira esse estilo “white-space: nowrap;” do header.

#6

Se eu faço isso o Titulo e tudo mais faz uma quebra de linha que fica tudo bagunçado.
Esse white-space é melhor colocar em cada container?

#7

Com um título gigante desse, quebra linha ou estoura a largura como estava acontecendo. Antes de pensar em codificação, você precisa definir como vai ficar em cada dimensão desejada, se vai diminuir a fonte ou outra coisa.

#8

Tendi, então o jeito seria eu diminuir a fonte se quiser que a pagina fique certinha caso o navegador tenha que diminuir. Tipo, essa página que to fazendo como vc ve, é só pra estudos mesmo, colocar em pratica o que eu aprendi e pra uso pessoal mesmo, tenho alguns links que eu quero salvar pra facilitar minha vida rsrs
Mas obg, é que eu queria que não apenas o titulo mas todo o conteudo continuasse fixo nos lugares quando a barra de rolagem fosse pro lado, mas acho que isso só acontece se eu fixar o tamanho de tudo ali certo?

#9

Rolagem pro lado no corpo da página não é uma experiência boa para o usuário, isto é visto como problema.

Não sei quais materiais está seguindo pra estudar, mas veja esses também:

https://tableless.com.br/design-responsivo-na-pratica-2-layout-ao-html/