Нижний колонтитул не выравнивается и оказывается внутри заголовка ⇐ CSS

[Anonymous]

У меня есть два разных стиля страницы: один в моем индексе с огромным «изображением», а другой — основной стиль, который я использую и не содержит «изображения».
первый дизайн был взят из codepen.io/jeffbredenkamp/pen/ZpGOAW, из него удалено лишь несколько вещей (почти ничего, но ничего не импортируется, например, высота или поля).
Проблема в моем футере это глупо, и в индексе он оказывается внутри заголовка (изображение по ссылке выше), хотя под ним есть контент. На других страницах нижний колонтитул прилипает к низу (как я хочу), но при масштабировании он закрывает другой контент.
Я не могу поделиться всем кодом, потому что по какой-то причине на codepin.io он отображается по-другому, но я поделился нижним колонтитулом, footer.css и стилем для моих .tabs (.tabs — это другой контент, который мой нижний колонтитул перемещается выше при масштабировании)
*Редактировать: мне удалось поместить все в codepen.io. Я сильно запутался с CSS, так как есть 4 разных CSS-файла, но вы можете посмотреть здесь:
Стиль 1: http://codepen.io/anon/pen/XjmZzyСтиль 2: http://codepen.io/anon/pen/zKvEPy
нижний колонтитул:




here.



Server

server information






Help |
About |
Contact

© Copyright | 2015 -



footer.css:
.footer {
width:100%;
background-color:#23282c;

position: absolute;
bottom: 0;

min-height:150px;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */

}

.footer-bottom {
background-color:#1e2327;
font-size:11px;
line-height:25px;
color:#777f8c;

position: absolute;
bottom: 0;

height:25px;
width:100%;
z-index:9;
}

.banner {
width:35%;
margin-left:10px;
line-height:160px;
padding:7px;
float:left;
}

.item {
position:relative;
}

.i1 {
float:left;
width:15%;
padding-top:7px;
margin-left:-150px;
padding-right:190px;
font-size:15px;
}

.i2 {
float:left;
width:15%;
padding-top:7px;
margin-left:-150px;
padding-right:190px;
font-size:15px;
}

.i3 {
float:left;
width:15%;
padding-top:7px;
margin-left:-150px;
padding-right:190px;
font-size:15px;
}

.item h1 {
color:#fff;
border-bottom:1px solid #475f93;
font-size:18px;
text-align:left;
}

.item .p {
color:#777f8c;
}

.footer-link {
color:#777f8c;
margin-left:5px;
margin-right:5px;
}

.footer-link:hover {
color:#fff;
}

.tabs:

About

Welcome to a website created by .

Got any questions? Please contact us

Contact Us



.tabs CSS:
.tabs {
left: 50%;
transform: translateX(-50%);
position: relative;
background: white;
width: 90%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
border-radius: 5px;
min-height:120px;
padding:7px;
overflow:visible;
}
.tabs h1 {
font-size: 1.5em;
font-family: 'Fjalla One', sans-serif;
color:#475f93;
font-weight:400;
border-bottom:1px solid #475f93;
}

.tabs .p {
color:#121417;
font-size:14px;
font-family: 'Raleway', sans-serif;
}


Подробнее здесь: https://stackoverflow.com/questions/394 ... the-header