I'm currently working on my footer, but I'm having trouble getting the width: 100% tag to work correctly. Here's a screenshot of what I mean:
http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c
This is my CSS code:
/*..Portfolio - Lars Beute..*/
body{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
header {
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
a{
text-decoration: none;
color: inherit;
}
nav ul{
background-color: #42a286;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
}
nav ul li{
display: inline-block;
padding: 20px;
}
nav ul li:hover{
background-color: #399077;
border-bottom: 3px solid white;
}
section {
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
.current{
border-bottom: 3px solid white;
}
#intro{
text-align: center;
background-color: #E6E6E6;
width: 100%;
}
#intro h1{
font-size: 50px;
}
#intro em{
opacity: 0.4;
}
#box1 {
width: 100%;
height: 300px;
background-color: #1A1A1A;
max-width: 100%;
max-height: 100%;
color: white;
text-align: center;
vertical-align: middle;
line-height: 300px;
}
#footer1 {
background: #00795f;
width: 100%;
height: 100px;
color: white;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
This is the HTML code that accompanies it:
<!--Portfolio by Lars Beute-->
<!--Copying not allowed under my permission-->
<!DOCTYPE html>
...
I am trying to have the footer extend all the way to the bottom of the page.
Thank you for your assistance!