How to move elements to the down of the page? - html

I want to move to the text area to align with other fields and then move all these fields to the down of the text "Feel free...." I was trying to use marigin-left, marigin-top, but nothing works. All the time these fields stay in one place. Do not know why.
It has to work on ip 6/7/8 plus resolution.
Could you tell me how can I achieve it?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#tekst {
position: absolute;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-left: 1000px;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-device-width: 500px) {
#profilesign {
width: 1000px;
margin-top: 750px;
margin-left: 400px;
font: Bold 60px/40px Georgia;
letter-spacing: 0;
color: black;
}
img.left {
padding: 0px 40px 20px 40px;
width: 550px;
height: 550px;
margin-left: 550px;
margin-top: 450px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 50px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
#sign a {
background-color: #DCDFDE;
padding: 20px 15px 17px 1px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#logo img {
margin-left: 550px;
text-align: center;
width: 650px;
}
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size: 100% 3000px;
width: auto;
}
.row {
width: 2500px;
display: grid;
grid-template-columns: 0% 80%;
}
.main-nav {
margin-left: 100px;
margin-top: 250px;
float: left;
display: inline-flex;
list-style: none;
}
.main-nav li a {
border-right: 3px solid black;
color: #000000;
text-decoration: none;
font: Bold 58px/45px Arial;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
article input {
width: 400px;
height: 70px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 45px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 700px;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div id="lala">
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<textarea placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea>
</div>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>

Related

How do I fix this design error on my log in page?

I am trying to fix the design error that I am facing with my log in page.
I have been trying to center the username and password form input field but it doesn't work. The icon is also misaligned with the username and password field.
I have tried altering the CSS but it just wouldn't center.
Below are my HTML and CSS codes:
body {
margin: 0;
padding: 0;
font-family: 'Corbel', sans-serif;
color: #FFFFFF
}
/*CSS for login.html & signup.html*/
#login-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 445px;
text-align: center;
}
#login-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
#register-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 500px;
text-align: center;
}
#register-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
.register {
margin: auto;
padding: 16px 0;
text-align: center;
margin-top: 30px;
width: 85%;
border-top: 1px solid #696969;
}
#register-link {
margin-top: 15px;
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
border-radius: 3px;
}
#register-required {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
color: black;
margin-top: 25px;
}
}
.input {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
margin-top: 25px;
}
.input-addon {
position: relative;
top: -2px;
float: left;
background-color: #ededed;
border: 1px solid #ededed;
padding: 4px 8px;
color: #757575;
border-right: 1px solid #757575;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=text] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15;
border: 1px solid #ededed;
padding: 6px 0px;
}
input[type=password] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15;
border: 1px solid #ededed;
padding: 6px 0px;
}
/*to remove blue block while in focus */
*:focus {
outline: none;
}
input[type=submit] {
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
margin-top: 35px;
}
/*CSS for main.html*/
.sidebar {
margin: auto;
padding: 0px;
width: 200px;
background-color: #FFFFFF;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #FFAE42;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
.content {
margin-left: 250px;
padding: 30px 16px;
height: 100%;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
/* Alert message box */
/* The alert message box */
.alert {
padding: 5px;
background-color: green;
color: white;
margin-bottom: 15px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Phisherman - Login</title>
<meta name="description" content="Phisherman - Login/Register">
<!--Meta name=viewport for mobile phone scaling-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
background-image: url('backgroundimg.png');
}
</style>
</head>
<body>
<div id="login-container">
<div id="login-container-title">
Login
</div>
<form method ="POST" action="auth.php">
<div class="input">
<div class="input-addon">
<i class="material-icons">face</i>
</div>
<input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
</div>
<div class="input">
<div class="input-addon">
<i class="material-icons">vpn_key</i>
</div>
<input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
</div>
<input type="submit" name="submit" value="Log In" />
</form>
<div class="register">
<span style="color: #657575">Don't have an account yet?</span>
<button id="register-link">Register here</button>
</div>
</div>
</div>
</body>
</html>

Use flexbox
body {
margin: 0;
padding: 0;
font-family: 'Corbel', sans-serif;
color: #FFFFFF
}
/*CSS for login.html & signup.html*/
#login-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 445px;
text-align: center;
}
#login-container form {
display: flex;
flex-flow: column wrap;
}
#login-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
#register-container {
background-color: #FFFFFF;
position: relative;
top: 15%;
margin: auto;
width: 340px;
height: 500px;
text-align: center;
}
#register-container-title {
position: relative;
background-color: #FFAE42;
width: 100%;
padding: 20px 0px;
font-size: 22px;
font-weight: bold;
}
.register {
margin: auto;
padding: 16px 0;
text-align: center;
margin-top: 30px;
width: 85%;
border-top: 1px solid #696969;
}
#register-link {
margin-top: 15px;
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
border-radius: 3px;
}
#register-required {
margin: auto;
width: 260px;
background-color: #ededed;
padding: 8px 0px;
color: black;
margin-top: 25px;
}
.input {
display: flex;
justify-content: center;
background-color: #ededed;
padding: 8px 0px;
margin: 25px auto 0;
width: 100%;
}
.input-addon {
position: relative;
top: 0;
float: left;
background-color: #ededed;
border: 1px solid #ededed;
padding: 6px 10px;
color: #757575;
border-right: 1px solid #757575;
margin-right: auto;
}
input[type=checkbox] {
cursor: pointer;
}
input[type=text] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15px;
border: 1px solid #ededed;
padding: 10px;
width: 100%;
}
input[type=password] {
color: #696969;
margin: 0;
background-color: #ededed;
font-size: 15px;
border: 1px solid #ededed;
padding: 10px;
width: 100%;
}
/*to remove blue block while in focus */
*:focus {
outline: none;
}
input[type=submit] {
padding: 15px 35px;
background: #FFAE42;
color: #FFFFFF;
font-size: 15;
font-weight: bold;
border: 0 none;
cursor: pointer;
margin-top: 35px;
}
/*CSS for main.html*/
.sidebar {
margin: auto;
padding: 0px;
width: 200px;
background-color: #FFFFFF;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #FFAE42;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
.content {
margin-left: 250px;
padding: 30px 16px;
height: 100%;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
/* Alert message box */
/* The alert message box */
.alert {
padding: 5px;
background-color: green;
color: white;
margin-bottom: 15px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Phisherman - Login</title>
<meta name="description" content="Phisherman - Login/Register">
<!--Meta name=viewport for mobile phone scaling-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body {
background-image: url('backgroundimg.png');
}
</style>
</head>
<body>
<div id="login-container">
<div id="login-container-title">
Login
</div>
<form method="POST" action="auth.php">
<div class="input">
<div class="input-addon">
<i class="material-icons">face</i>
</div>
<input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
</div>
<div class="input">
<div class="input-addon">
<i class="material-icons">vpn_key</i>
</div>
<input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
</div>
<input type="submit" name="submit" value="Log In" />
</form>
<div class="register">
<span style="color: #657575">Don't have an account yet?</span>
<button id="register-link">Register here</button>
</div>
</div>
</div>
</body>
</html>

How to move the text higher in input label and do enter when reaching end line?

I have input label where there might be a lot of text.
how it looks now
I would like to have this 'Type something' in the left up corner. What is more, I would like to have an enter when we are closing to right border (end line). Currently it looks like this:
not making enter when reaching end line
I would like to have enter there.
Could you tell me how can I make these two improvements?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
}
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div>
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<label><input type="something" name="something" placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></label><br></p>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>

I would suggest using a textarea for that. I made some changes to the CSS also
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input,
article textarea {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 300px;
height: 150px;
text-align: justify;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div>
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<label><textarea name="something" placeholder='Type something' id="something" cols="50" rows="15" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea></label><br>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>

Trying to arrange <LI> and feeling very stuck

Problem: I have to arrange these LI in a very specific way. Here is the image:
but I can't seem to break the boxes up. I have tried Flexbox, ClearFix, etc... no luck.
Please look at the picture so you can see how I am suppose to make this look.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 80%;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>

Welcome to SO, Its simple use column-count: property on ul
Here is updated snippet.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 100vh;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: 100vh;
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#boxList{
column-count: 2;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>

I would suggest you use the id you have given the <ul> tag i.e boxlist and then apply the display as flex this way all your li elements will be in a flex box.Then work with the <li> elements as flex box elements here is a link that could help you out:-
https://www.w3schools.com/css/css3_flexbox.asp
I would highly recommend you to use grid as it can be more usefull and I like it better than flex box,here is the link you can use to refer how a grid box is used:-
https://www.w3schools.com/css/css_grid.asp

Gridview
<ul class="gridview grid-3">
<li><p>Hello<br>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
</ul>
ul.gridview > li {
display: block;
float: left;
padding: 0;
margin: 0;
}
ul.gridview > li p {
background: #ddd;
padding: 5px;
margin: 0;
}
/* Grid-3 */
ul.grid-3 > li {
width: calc(100% / 3 - 2 * 10px / 3);
}
ul.grid-3 > li:nth-child(n + 4) {
margin-top: 10px;
}
ul.grid-3 > li:nth-child(3n + 1) {
clear: left;
}
ul.grid-3 > li:not(:nth-child(3n + 1)) {
margin-left: 10px;
}
/* Grid-4 */
ul.grid-4 > li {
width: calc(100% / 4 - 3 * 10px / 4);
}
ul.grid-4 > li:nth-child(n + 5) {
margin-top: 10px;
}
ul.grid-4 > li:nth-child(4n + 1) {
clear: left;
}
ul.grid-4 > li:not(:nth-child(4n + 1)) {
margin-left: 10px;
}
Codepen

How to get hovered images into background ?

#charset "utf-8";
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #F2F2F2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: expresswayregular;
}
#font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
position: fixed;
background: #333333;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
}
#header-content {
background: #333333;
width: 1280px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
}
#currentsite-info font {
position: absolute;
height: 30px;
width: auto;
margin-left: 60px;
padding: 10px;
color: #fff;
font-size: 26px;
}
#search-box {
width: 400px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#search {
background: #fff;
width: 356px;
height: 16px;
margin-top: 10px;
margin-bottom: 10px;
padding: 6px;
border: 1px solid #fff;
border-radius: 6px 0 0 6px;
}
#submit {
float: right;
background: #fff;
width: 29px;
height: 28px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-radius: 0 6px 6px 0;
}
#menu {
margin-right: 30px;
margin-left: 25px;
z-index: 1000;
}
.menu-linkbox a{
position: static;
float: right;
width: 60px;
height: 14px;
top: 0;
padding: 18px 15px 18px 15px;
color: #F2F2F2;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.menu-linkbox:hover a {
color: #2997D3;
transition: all 500ms;
}
#menu-linkbox-live a {
color: #2997D3;
}
#main-content {
background: #fff;
min-height: 100%;
width: 1280px;
margin: 0 auto;
padding-top: 50px;
overflow: auto;
}
#content-articles {
background: #F2F2F2;
width: 1220px;
bottom: 0;
margin: 20px;
padding: 10px;
border: 1px solid #000;
overflow: auto;
}
#article1 {
width: 550px;
margin: 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article1 h1 {
font-size: 40px;
}
#article1-content {
width: 100%;
}
#photo1 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo1:hover {
opacity: 0.8;
}
#article2 {
width: 550px;
margin: 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article2 h1 {
font-size: 40px;
}
#article2-content {
width: 100%;
}
#photo2 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo2:hover {
opacity: 0.8;
}
#article3 {
width: 550px;
margin: 60px 10px 10px 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article3 h1 {
font-size: 40px;
}
#article3-content {
width: 100%;
}
#photo3 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo3:hover {
opacity: 0.8;
}
#article4 {
width: 550px;
margin: 60px 10px 10px 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article4 h1 {
font-size: 40px;
}
#article4-content {
width: 100%;
}
#photo4 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo4:hover {
opacity: 0.8;
}
#imprint {
background: #333333;
bottom: 0;
width: 100%;
}
#imprint-content {
background: #333333;
width: 1280px;
height: 150px;
margin: auto;
}
#about-info {
width: 300px;
height: 130px;
float: left;
margin-left: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#about-info h2 {
text-align: center;
}
#about-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#contact-info {
position: static;
width: 300px;
height: 130px;
margin-right: auto;
margin-left: auto;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#contact-info h2 {
text-align: center;
}
#contact-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#legal-info {
width: 300px;
height: 130px;
float: right;
margin-right: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#legal-info h2 {
text-align: center;
}
#legal-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
h1 {
color: #2997D3;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
p {
margin: 20px;
}
a {
color: #2997D3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
<link rel="icon" href="images/logo_site.png">
<title>Topics</title>
<script>
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "▾";
}
else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
</script>
</head>
<body>
<div id="header">
<div id="header-content">
<img id ="logo" src="images/logo.png" />
<div id="currentsite-info">
<font>Topics</font>
</div>
<div id="menu">
<div class="menu-linkbox" id="menu-linkbox-breaking">Breaking</div>
<div class="menu-linkbox" id="menu-linkbox-live">Topics</div>
<div class="menu-linkbox" id="menu-linkbox-scene">News</div>
<div class="menu-linkbox" id="menu-linkbox-home">Overview</div>
</div>
<div id="search-box">
<form action="http://www.google.com/search" method="get">
<input id="search" type="text" name="q" placeholder="Search">
<input id="submit" type="image" src="images/search.png" alt="Submit">
</form>
</div>
</div>
</div>
<div id="main-content">
<div id="content-articles">
<div id="article1">
<div id="article1-content">
<h1>Politics</h1>
</div>
<div id="article1-photo">
<img id ="photo1" src="images/footage/topic1adjusted.jpeg" />
</div>
</div>
<div id="article2">
<div id="article2-content">
<h1>Healthcare</h1>
</div>
<div id="article2-photo">
<img id ="photo2" src="images/footage/topic2.jpeg" />
</div>
</div>
<div id="article3">
<div id="article3-content">
<h1>Network</h1>
</div>
<div id="article3-photo">
<img id ="photo3" src="images/footage/topic3adjusted.jpeg" />
</div>
</div>
<div id="article4">
<div id="article4-content">
<h1>Travel</h1>
</div>
<div id="article4-photo">
<img id ="photo4" src="images/footage/topic4adjusted.jpeg" />
</div>
</div>
</div>
</div>
<div id="imprint">
<div id="imprint-content">
<div id="about-info">
<h2>About Us</h2>
<p>
Company information
</p>
</div>
<div id="legal-info">
<h2>Legal Use</h2>
<p>
Copyright information
</p>
</div>
<div id="contact-info">
<h2>Contact</h2>
<p>
Contact information
</p>
</div>
</div>
</div>
</body>
</html>
Hello I have given you a snippet with my current website. It has 4 pictures and a fixed header. When you hover over the picture their opacity is being changed (1->0.8). My problem is that they are also goin over the header... I tried using a z-index but it's not working, any ideas on how to get them behind the header ?

z-index only works on positioned elements
So, I've added position: relative to #photo1 and z-index: 1 to header.
Bonus - added a link to hosted photo instead of the non-working local paths you gave, so you can see it work.
#charset "utf-8";
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #F2F2F2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: expresswayregular;
}
#font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
position: fixed;
background: #333333;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
z-index: 1;
}
#header-content {
background: #333333;
width: 1280px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
}
#currentsite-info font {
position: absolute;
height: 30px;
width: auto;
margin-left: 60px;
padding: 10px;
color: #fff;
font-size: 26px;
}
#search-box {
width: 400px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#search {
background: #fff;
width: 356px;
height: 16px;
margin-top: 10px;
margin-bottom: 10px;
padding: 6px;
border: 1px solid #fff;
border-radius: 6px 0 0 6px;
}
#submit {
float: right;
background: #fff;
width: 29px;
height: 28px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-radius: 0 6px 6px 0;
}
#menu {
margin-right: 30px;
margin-left: 25px;
z-index: 1000;
}
.menu-linkbox a{
position: static;
float: right;
width: 60px;
height: 14px;
top: 0;
padding: 18px 15px 18px 15px;
color: #F2F2F2;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.menu-linkbox:hover a {
color: #2997D3;
transition: all 500ms;
}
#menu-linkbox-live a {
color: #2997D3;
}
#main-content {
background: #fff;
min-height: 100%;
width: 1280px;
margin: 0 auto;
padding-top: 50px;
overflow: auto;
}
#content-articles {
background: #F2F2F2;
width: 1220px;
bottom: 0;
margin: 20px;
padding: 10px;
border: 1px solid #000;
overflow: auto;
}
#article1 {
width: 550px;
margin: 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article1 h1 {
font-size: 40px;
}
#article1-content {
width: 100%;
}
#photo1 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
position: relative;
}
#photo1:hover {
opacity: 0.8;
}
#article2 {
width: 550px;
margin: 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article2 h1 {
font-size: 40px;
}
#article2-content {
width: 100%;
}
#photo2 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo2:hover {
opacity: 0.8;
}
#article3 {
width: 550px;
margin: 60px 10px 10px 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article3 h1 {
font-size: 40px;
}
#article3-content {
width: 100%;
}
#photo3 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo3:hover {
opacity: 0.8;
}
#article4 {
width: 550px;
margin: 60px 10px 10px 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article4 h1 {
font-size: 40px;
}
#article4-content {
width: 100%;
}
#photo4 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
z-index: -1000;
}
#photo4:hover {
opacity: 0.8;
}
#imprint {
background: #333333;
bottom: 0;
width: 100%;
}
#imprint-content {
background: #333333;
width: 1280px;
height: 150px;
margin: auto;
}
#about-info {
width: 300px;
height: 130px;
float: left;
margin-left: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#about-info h2 {
text-align: center;
}
#about-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#contact-info {
position: static;
width: 300px;
height: 130px;
margin-right: auto;
margin-left: auto;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#contact-info h2 {
text-align: center;
}
#contact-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#legal-info {
width: 300px;
height: 130px;
float: right;
margin-right: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#legal-info h2 {
text-align: center;
}
#legal-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
h1 {
color: #2997D3;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
p {
margin: 20px;
}
a {
color: #2997D3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
<link rel="icon" href="images/logo_site.png">
<title>Topics</title>
<script>
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "▾";
}
else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
</script>
</head>
<body>
<div id="header">
<div id="header-content">
<img id ="logo" src="images/logo.png" />
<div id="currentsite-info">
<font>Topics</font>
</div>
<div id="menu">
<div class="menu-linkbox" id="menu-linkbox-breaking">Breaking</div>
<div class="menu-linkbox" id="menu-linkbox-live">Topics</div>
<div class="menu-linkbox" id="menu-linkbox-scene">News</div>
<div class="menu-linkbox" id="menu-linkbox-home">Overview</div>
</div>
<div id="search-box">
<form action="http://www.google.com/search" method="get">
<input id="search" type="text" name="q" placeholder="Search">
<input id="submit" type="image" src="images/search.png" alt="Submit">
</form>
</div>
</div>
</div>
<div id="main-content">
<div id="content-articles">
<div id="article1">
<div id="article1-content">
<h1>Politics</h1>
</div>
<div id="article1-photo">
<img id ="photo1" src="http://www.mtv.com/crop-images/2013/09/11/Foo%20Fighters%20officail.jpg" />
</div>
</div>
<div id="article2">
<div id="article2-content">
<h1>Healthcare</h1>
</div>
<div id="article2-photo">
<img id ="photo2" src="images/footage/topic2.jpeg" />
</div>
</div>
<div id="article3">
<div id="article3-content">
<h1>Network</h1>
</div>
<div id="article3-photo">
<img id ="photo3" src="images/footage/topic3adjusted.jpeg" />
</div>
</div>
<div id="article4">
<div id="article4-content">
<h1>Travel</h1>
</div>
<div id="article4-photo">
<img id ="photo4" src="images/footage/topic4adjusted.jpeg" />
</div>
</div>
</div>
</div>
<div id="imprint">
<div id="imprint-content">
<div id="about-info">
<h2>About Us</h2>
<p>
Company information
</p>
</div>
<div id="legal-info">
<h2>Legal Use</h2>
<p>
Copyright information
</p>
</div>
<div id="contact-info">
<h2>Contact</h2>
<p>
Contact information
</p>
</div>
</div>
</div>
</body>
</html>

I added z-index properties to your #header and #main-content css classes and there is no longer any overlap on hover.
I've also removed the z-index values you set on the images themselves (#photo1 etc) as the z-index set on #main-content applies to them as well, as they are its children.
Hope this helps.
#charset "utf-8";
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #F2F2F2;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: expresswayregular;
}
#font-face {
font-family: 'expresswayregular';
src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
url('fonts/expressway_rg-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#header {
position: fixed;
background: #333333;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
z-index: 1;
}
#header-content {
background: #333333;
width: 1280px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
#logo {
position: absolute;
}
#currentsite-info font {
position: absolute;
height: 30px;
width: auto;
margin-left: 60px;
padding: 10px;
color: #fff;
font-size: 26px;
}
#search-box {
width: 400px;
height: 50px;
margin-right: auto;
margin-left: auto;
}
#search {
background: #fff;
width: 356px;
height: 16px;
margin-top: 10px;
margin-bottom: 10px;
padding: 6px;
border: 1px solid #fff;
border-radius: 6px 0 0 6px;
}
#submit {
float: right;
background: #fff;
width: 29px;
height: 28px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-radius: 0 6px 6px 0;
}
#menu {
margin-right: 30px;
margin-left: 25px;
z-index: 1000;
}
.menu-linkbox a{
position: static;
float: right;
width: 60px;
height: 14px;
top: 0;
padding: 18px 15px 18px 15px;
color: #F2F2F2;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.menu-linkbox:hover a {
color: #2997D3;
transition: all 500ms;
}
#menu-linkbox-live a {
color: #2997D3;
}
#main-content {
background: #fff;
min-height: 100%;
width: 1280px;
margin: 0 auto;
padding-top: 50px;
overflow: auto;
z-index: -1;
}
#content-articles {
background: #F2F2F2;
width: 1220px;
bottom: 0;
margin: 20px;
padding: 10px;
border: 1px solid #000;
overflow: auto;
}
#article1 {
width: 550px;
margin: 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article1 h1 {
font-size: 40px;
}
#article1-content {
width: 100%;
}
#photo1 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo1:hover {
opacity: 0.8;
}
#article2 {
width: 550px;
margin: 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article2 h1 {
font-size: 40px;
}
#article2-content {
width: 100%;
}
#photo2 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo2:hover {
opacity: 0.8;
}
#article3 {
width: 550px;
margin: 60px 10px 10px 10px;
float: left;
text-align: justify;
word-spacing: 4px;
}
#article3 h1 {
font-size: 40px;
}
#article3-content {
width: 100%;
}
#photo3 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo3:hover {
opacity: 0.8;
}
#article4 {
width: 550px;
margin: 60px 10px 10px 10px;
float: right;
text-align: justify;
word-spacing: 4px;
}
#article4 h1 {
font-size: 40px;
}
#article4-content {
width: 100%;
}
#photo4 {
width: 500px;
height: 500px;
margin: 0px auto;
border: 2px solid #2997D3;
display: block;
transition: all 500ms;
}
#photo4:hover {
opacity: 0.8;
}
#imprint {
background: #333333;
bottom: 0;
width: 100%;
}
#imprint-content {
background: #333333;
width: 1280px;
height: 150px;
margin: auto;
}
#about-info {
width: 300px;
height: 130px;
float: left;
margin-left: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#about-info h2 {
text-align: center;
}
#about-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#contact-info {
position: static;
width: 300px;
height: 130px;
margin-right: auto;
margin-left: auto;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#contact-info h2 {
text-align: center;
}
#contact-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
#legal-info {
width: 300px;
height: 130px;
float: right;
margin-right: 20px;
padding: 10px 20px 10px 20px;
vertical-align: middle;
font-size: 18px;
text-align: justify;
color: #fff;
}
#legal-info h2 {
text-align: center;
}
#legal-info p {
margin: 20px;
text-align: center;
vertical-align: middle;
}
h1 {
color: #2997D3;
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
p {
margin: 20px;
}
a {
color: #2997D3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
<link rel="icon" href="images/logo_site.png">
<title>Topics</title>
<script>
function toggleNavPanel(x){
var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
if(panel.style.height == maxH){
panel.style.height = "0px";
navarrow.innerHTML = "▾";
}
else {
panel.style.height = maxH;
navarrow.innerHTML = "▴";
}
}
</script>
</head>
<body>
<div id="header">
<div id="header-content">
<img id ="logo" src="images/logo.png" />
<div id="currentsite-info">
<font>Topics</font>
</div>
<div id="menu">
<div class="menu-linkbox" id="menu-linkbox-breaking">Breaking</div>
<div class="menu-linkbox" id="menu-linkbox-live">Topics</div>
<div class="menu-linkbox" id="menu-linkbox-scene">News</div>
<div class="menu-linkbox" id="menu-linkbox-home">Overview</div>
</div>
<div id="search-box">
<form action="http://www.google.com/search" method="get">
<input id="search" type="text" name="q" placeholder="Search">
<input id="submit" type="image" src="images/search.png" alt="Submit">
</form>
</div>
</div>
</div>
<div id="main-content">
<div id="content-articles">
<div id="article1">
<div id="article1-content">
<h1>Politics</h1>
</div>
<div id="article1-photo">
<img id ="photo1" src="images/footage/topic1adjusted.jpeg" />
</div>
</div>
<div id="article2">
<div id="article2-content">
<h1>Healthcare</h1>
</div>
<div id="article2-photo">
<img id ="photo2" src="images/footage/topic2.jpeg" />
</div>
</div>
<div id="article3">
<div id="article3-content">
<h1>Network</h1>
</div>
<div id="article3-photo">
<img id ="photo3" src="images/footage/topic3adjusted.jpeg" />
</div>
</div>
<div id="article4">
<div id="article4-content">
<h1>Travel</h1>
</div>
<div id="article4-photo">
<img id ="photo4" src="images/footage/topic4adjusted.jpeg" />
</div>
</div>
</div>
</div>
<div id="imprint">
<div id="imprint-content">
<div id="about-info">
<h2>About Us</h2>
<p>
Company information
</p>
</div>
<div id="legal-info">
<h2>Legal Use</h2>
<p>
Copyright information
</p>
</div>
<div id="contact-info">
<h2>Contact</h2>
<p>
Contact information
</p>
</div>
</div>
</div>
</body>
</html>

Centering text - responsive

Is there a way to have a responsive container, so all items inside of that container are in the middle of the page, no matter what screen dimension?
Thanks :)
Images are obviously missing, but here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sharpturn Network</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img id="logo" src="img/upload.png">
<nav>
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li><a class="nav" href="#">UPLOAD</a></li>
<li><a class="nav" href="support.html">SUPPORT</a></li>
<li><a class="nav" href="#">FAQS</a> </li>
</ul>
</nav>
</header><img class="banner" src="img/banner.jpg">
<h1 class="title">SIMPLE AS 1, 2, 3!</h1>
<div class="steps">
<img src="img/form.png">
<h2 class="subtitle">Complete our form</h2>
<p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
</div>
<div class="steps">
<img src="img/wait.png">
<h2 class="subtitle">Patience is a virtue</h2>
<p>Allow upto 72 hours for an submission review and response from our team.</p>
</div>
<div class="steps">
<img src="img/uploaded.png">
<h2 class="subtitle">Viola! All done.</h2>
<p>Your talent is now being promoted and showcased world wide.</p>
</div>
<img class="banner" src="img/grande.jpg">
</body>
</html>
CSS
/*MAIN*/
body {
line-height: 1.25em;
font-family: 'Roboto',sans-serif;
background: url(img/banner.png);
background-size: cover;
/* For flexibility */
color: #505050;
margin: 0;
padding: 0;
}
header {
background: #505050;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 100;
padding-bottom: 10px;
margin-bottom: 5px;
}
#logo {
margin-top: 20px;
margin-left: 60px;
float: left;
width: 80px;
height: 60px;
display: block;
padding-bottom: 25px;
}
nav {
float: right;
padding: 20px;
color: #fff;
}
nav .active {
font-size: 20px;
color: #cc293f;
}
nav a {
margin-right: 20px;
font-size: 20px;
color: #fff;
text-decoration: none;
}
#menu-icon {
width: 40px;
height: 40px;
background: #fff url(img/menu-icon.png) center;
}
a:hover {
color: #cc293f;
}
a:hover#menu-icon {
background-color: #fff;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
color: #fff;
display: inline-block;
float: left;
}
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
.supportbox1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox1 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox1 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox2 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox2 img {
padding-left: 41%;
padding-top: 40px;
}
.supportbox3 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox3 p {
padding-left: 5px;
padding-right: 5px;
}
.supportbox3 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox3 a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #505050;
border: 3px solid #505050;
color: #cc293f;
font-size: 20px;
margin: 90px 0 55px;
padding: 5px 10px;
position: absolute;
text-decoration: none;
}
.imgicon {
margin-left: -117px;
max-height: 80px;
max-width: 80px;
min-height: 80px;
min-width: 80px;
}
h1.title {
text-align: center;
font-size: 30px;
color: #cc293f;
margin-top: 25px;
margin-bottom: 45px;
}
h1.sub {
font-size: 24px;
color: #cc293f;
text-align: center;
padding-bottom: 50px;
}
h2.subtitle {
color: #cc293f;
text-align: center;
padding-top: -5px;
}
p {
font-family: 'Roboto',sans-serif;
margin-bottom: 20px;
}
.steps {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin: 0 100px 10px -5px;
max-height: 3500px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
}
.steps p {
font-size: 19px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.steps img {
display: block;
margin-left: auto;
margin-right: auto;
}
/****Responsive ****/
#media only screen and (max-width:640px) {
header {
position: absolute;
}
.banner {
width: 100% !important;
height: 300px;
border-bottom: 1px solid #000;
}
#menu-icon {
display: inline-block;
}
nav ul,nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #505050;
border: 5px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
font-color: #fff;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
background-color: #505050;
display: block;
}
nav ul {
background: #505050;
}

Set the container property
text-align:center;
and in the element inside the container ( like a paragraph or img) specify
display:inline-block