Борьба с макетами CSS ⇐ CSS

[Anonymous]

Мне бы хотелось, чтобы заголовок занимал всю ширину страницы, но это не так. (.red и .green), я бы хотел, чтобы мой нижний колонтитул не был виден до тех пор, пока он не будет прокручен вниз, а затем оставался внизу страницы, я бы хотел, чтобы мой неф находился на одном уровне с левой стороной экрана и оставался там .

Код: Выделить всё

type here





Reno, NV

body  {
background-image: url("RenoAtNight.jpg");
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
}




Reno, NV
The Littlest Big City! 


[url=index.html]Home[/url]nbsp
[url=Carson-city.html]Carson City[/url]nbsp
[url=Reno.html]Reno, NV[/url]nbsp
[url=Elko.html]Elko[/url]nbsp
[url=Las Vegas.html]Las Vegas[/url]nbsp



Why Aren't you appearing, bro?
A bunch of Lorem edited out to not muddy the code too much.




More lorem placeholder text.

>

Код: Выделить всё

*{
box-sizing: border-box;
}

.green{
display:block;
text-align:center;
background:radial-gradient( rgba(255, 145, 0, 0.595), rgb(138, 154, 91));
margin-top:20px;
border-top:20px black solid;
border-bottom:20px black solid;
}

.red{
text-align:center;
background:radial-gradient( rgb(4, 63, 135, 0.9), rgb(111, 4, 4, 0.95));
margin-top:20px;
border-top:20px black solid;
border-bottom:20px black solid;
left:0px;
width:100%
}

h1{
font-size:4rem;
}

nav a:hover {
color:gray;
font-size:.98em;

}
nav{
display:block;
height:100vh;
width:20%;
background-color:black;
padding:15px;
position:fixed;
margin:0px;
left:0px;
}
a {
display:block;
color:white;
}
section{
display:block;
width:70%;
background-color: rgba(255, 255, 255, 0.7);
position:relative;
left:25%;
}

footer{
position:absolute;
left: 20%;
bottom: 0;
width: 80%;
background-color: red;
color: white;
text-align: center;
}

Я поигрался с сеткой, плавающей запятой и КАЖДЫМ ВАРИАНТОМ ПОЗИЦИОНИРОВАНИЯ В ЧЕРТОВОМ МИРЕ!!!!!!

Подробнее здесь: https://stackoverflow.com/questions/791 ... ss-layouts