How to add another two full width sections below - html

Question

Hi there I've built a portfolio website but for the life of me for the past 3 days I haven't been able to added full-width sections after my portfolio grid.
I'm really at this point not sure what more I can do and would really love to hear from you how can I possibly add further full-width sections below my portfolio grid!
Here's the website:
http://hghazni.com/v2/index.html
And the code:
body {
margin: 0;
padding: 0;
}
body, html {
margin: 0;
font: 1em "Open Sans", Sans-serif;
}
.nav-main {
position: fixed;
z-index: 9999;
width: 100%;
background-color: #222;
height: 5em;
color: #fff;
}
.nav-main .logo {
float: left;
font-weight: bolder;
height: 40px;
padding: 15px 30px;
font-size: 3.0em;
line-height:35px
}
.under-logo {
font-size: 1em;
color: #fff;
float: left;
margin-top: 45px;
margin-left: 55px;
line-height:40px;
position: absolute;
}
.nav-main > ul {
margin: 0;
padding: 0;
float: right;
font-size: 3em;
font-weight: bold;
list-style-type: none;
padding-right: 30px;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.nav-item:hover {
background-color: #444;
}
.title {
height: 50em;
position: relative;
text-align: center;
color: #fff;
font-family: Open sans, Tahoma, Arial;
background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
/*background-color: #ee712b;*/
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
overflow: visible;
/*position: absolute;
top: 20%;
left: 30%;
right: 30%*/
}
.title img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*margin: auto;*/
/*width: 100%;*/
}
.title h1 {
position: absolute;
top:70%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 4em;
/*position: static;
text-align: center;
margin: auto;
width: 70%;*/
}
.title h2 {
/*background-color:#000;
position: static;
text-align: center;
margin: auto;
width: 80%;*/
position: absolute;
top:82.5%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 2.5em;
}
.content {
padding: 20px;
top: 100%;
left: 0;
background-color: #fff;
align-items: center;
padding-bottom: 40px;
}
.content h1 {
text-align: center;
font-size: 8em;
margin: auto;
margin-top: 50px;
}
.content h3 {
padding: 10px;
font-size: 2.2em;
font-weight: normal;
width:80%;
margin: auto;
}
.work-header {
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
height: 100%;
left: 0;
text-align: center;
background-color: #343436;
}
/*Portfolio Header*/
.work-header h1 {
font-size: 4.2em;
color: #fff;
}
#brain {
color: #e4c027;
}
#heart {
color: #f90446
}
#soul {
color: #6442e9
}
/*Portfolio Grid Section baby*/
.work {
background-color: #fff;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 8%;
margin: 0;
width: 92%;
height: 100%;
text-align: center;
}
.work h1 {
padding-bottom: 2em;
padding-right: 6em;
}
.box {
float:left;
position: relative;
width: 28%;
padding-left: 1%;
padding-bottom: 1%;
background-color: #fff;
}
.boxInner {
position: relative;
left: 20px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 100%;
overflow: auto;
}
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: -50px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 1em;
height: 3em;
padding-top: 1em;
font-size: 2em;
font-weight: bold;
}
/*contact page*/
.work .parent {
position: relative;
padding-top: 50px;
}
.work .parent .contact {}
.work .parent .contact h1 {
text-align: center;
}
.work .parent .contact h4 {
color: #000;
text-align: center;
font-size: 50px;
}
/*contact form*/
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 100%;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 50%;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 25%;
}
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
.footer {
background-color: #2d2c2c;
width: 100%;
height: 100%;
position: relative;
padding-left: 20em;
text-align: center;
font-size: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Haroon Ghazni</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body class="no-touch">
<nav class="nav-main">
<div class="logo">HGHAZNI</div>
<div class="under-logo">WEB/UI/UX/GRAPHIC</div>
<ul>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="title" >
<img src="img/hg_avatar.png" alt="Haroon Ghazni" />
<h1>I’m Haroon Ghazni.</h1>
<h2>A Web Designer from the little big city of Nottingham.</h2>
</div>
<div class="content" id="about">
<h1>Who?</h1>
<h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
<h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
<h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
</div>
<div class="work-header" id="work">
<h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
</div>
<div class="work">
<!-- <h1> me wurk </h1> -->
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port1.jpg" />
<div class="titleBox">Butterfly</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port2.jpg" />
<div class="titleBox">La Pura Vida</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port3.jpg" />
<div class="titleBox">Bohemian Purple</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port4.jpg" />
<div class="titleBox">Lost in Innocence</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port5.jpg" />
<div class="titleBox">Cerebral Experience</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port6.jpg" />
<div class="titleBox">Mario Escort</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port7.jpg" />
<div class="titleBox">Restaurant iOS App</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port8.jpg" />
<div class="titleBox">Nottingham Sober Yaught Dragons</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port9.jpg" />
<div class="titleBox">Poet Farmer</div>
</div>
</div>
<div class="parent">
<div class="contact" id="contact">
<h1>Do not hesitate to get in touch</h1>
<h4>hghazni#gmail.com</h4>
<p> HEY HEY HEY asdasdas dasdasda sdad</p>
</div>
</div>
</div>
<div class="footer">
<h1> footer </h1>
</div>
</body>
</html>

Answer 1

I did following changes to your code
Took out the parent div from work div and made it 100% width
Removed the padding-right from the h1.
Moved up the .footer class and added right after the .parent class styles.
Removed padding-left: 20em; and the big font size from .footer class.
And the most important thing is that you have added conditional comment inside css file which is not valid. This should be added in Html page. inside head tag
I think this solves all of your problems :)
body {
margin: 0;
padding: 0;
}
body, html {
margin: 0;
font: 1em "Open Sans", Sans-serif;
}
.nav-main {
position: fixed;
z-index: 9999;
width: 100%;
background-color: #222;
height: 5em;
color: #fff;
}
.nav-main .logo {
float: left;
font-weight: bolder;
height: 40px;
padding: 15px 30px;
font-size: 3.0em;
line-height:35px
}
.under-logo {
font-size: 1em;
color: #fff;
float: left;
margin-top: 45px;
margin-left: 55px;
line-height:40px;
position: absolute;
}
.nav-main > ul {
margin: 0;
padding: 0;
float: right;
font-size: 3em;
font-weight: bold;
list-style-type: none;
padding-right: 30px;
}
.nav-main > ul > li {
float: left;
}
.nav-item {
display: inline-block;
padding: 15px 20px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.nav-item:hover {
background-color: #444;
}
.title {
height: 50em;
position: relative;
text-align: center;
color: #fff;
font-family: Open sans, Tahoma, Arial;
background: url(http://hghazni.com/v2/img/flat_mountain_bg.jpg) no-repeat center center fixed;
/*background-color: #ee712b;*/
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
overflow: visible;
/*position: absolute;
top: 20%;
left: 30%;
right: 30%*/
}
.title img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*margin: auto;*/
/*width: 100%;*/
}
.title h1 {
position: absolute;
top:70%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 4em;
/*position: static;
text-align: center;
margin: auto;
width: 70%;*/
}
.title h2 {
/*background-color:#000;
position: static;
text-align: center;
margin: auto;
width: 80%;*/
position: absolute;
top:82.5%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color:#000;
font-size: 2.5em;
}
.content {
padding: 20px;
top: 100%;
left: 0;
background-color: #fff;
align-items: center;
padding-bottom: 40px;
}
.content h1 {
text-align: center;
font-size: 8em;
margin: auto;
margin-top: 50px;
}
.content h3 {
padding: 10px;
font-size: 2.2em;
font-weight: normal;
width:80%;
margin: auto;
}
.work-header {
padding-top: 40px;
padding-bottom: 40px;
width: 100%;
height: 100%;
left: 0;
text-align: center;
background-color: #343436;
}
/*Portfolio Header*/
.work-header h1 {
font-size: 4.2em;
color: #fff;
}
#brain {
color: #e4c027;
}
#heart {
color: #f90446
}
#soul {
color: #6442e9
}
/*Portfolio Grid Section baby*/
.work {
background-color: #fff;
position: relative;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 8%;
margin: 0;
width: 92%;
height: 100%;
text-align: center;
}
.work h1 {
padding-bottom: 2em;
padding-right: 6em;
}
.box {
float:left;
position: relative;
width: 28%;
padding-left: 1%;
padding-bottom: 1%;
background-color: #fff;
}
.boxInner {
position: relative;
left: 20px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 100%;
overflow: auto;
}
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: -50px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 1em;
height: 3em;
padding-top: 1em;
font-size: 2em;
font-weight: bold;
}
/*contact page*/
.parent {
position: relative;
padding-top: 50px;
width: 100%;
float: left;
}
.parent .contact {
text-align: center;
}
.parent .contact h1 {
padding: 0;
}
.work .parent .contact h4 {
color: #000;
text-align: center;
font-size: 50px;
}
/*contact form*/
.footer {
background-color: #2d2c2c;
width: 100%;
height: 100%;
position: relative;
text-align: center;
clear: both;
}
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 100%;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 50%;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Haroon Ghazni</title>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body class="no-touch">
<nav class="nav-main">
<div class="logo">HGHAZNI</div>
<div class="under-logo">WEB/UI/UX/GRAPHIC</div>
<ul>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="title" >
<img src="img/hg_avatar.png" alt="Haroon Ghazni" />
<h1>I’m Haroon Ghazni.</h1>
<h2>A Web Designer from the little big city of Nottingham.</h2>
</div>
<div class="content" id="about">
<h1>Who?</h1>
<h3>I am a dynamic and creative web designer with experience of working on international brands in a fast paced collaborative environment.</h3>
<h3>As a hands on individual who isn’t afraid of a pen and paper I work through the full UX lifecycle from research to design and testing utilising all elements of a user centred design process to create innovative cross platform experiences.</h3>
<h3>I enjoy learning new skills as well as playing an active part in the design community.</h3>
</div>
<div class="work-header" id="work">
<h1>My Work – <span id="brain">Brain</span>,<span id="heart"> Heart</span> and <span id="soul">Soul.</span></h1>
</div>
<div class="work">
<!-- <h1> me wurk </h1> -->
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port1.jpg" />
<div class="titleBox">Butterfly</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port2.jpg" />
<div class="titleBox">La Pura Vida</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port3.jpg" />
<div class="titleBox">Bohemian Purple</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port4.jpg" />
<div class="titleBox">Lost in Innocence</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port5.jpg" />
<div class="titleBox">Cerebral Experience</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port6.jpg" />
<div class="titleBox">Mario Escort</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port7.jpg" />
<div class="titleBox">Restaurant iOS App</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port8.jpg" />
<div class="titleBox">Nottingham Sober Yaught Dragons</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="http://hghazni.com/v2/img/port9.jpg" />
<div class="titleBox">Poet Farmer</div>
</div>
</div>
</div>
<div class="parent">
<div class="contact" id="contact">
<h1>Do not hesitate to get in touch</h1>
<h4>hghazni#gmail.com</h4>
<p> HEY HEY HEY asdasdas dasdasda sdad</p>
</div>
</div>
<div class="footer">
<h1> footer </h1>
</div>
</body>
</html>