Reputation: 3
So I have been creating a very basic website with a header
, nav
, main container, and a footer
. and I'm using the the viewport
tag in my website.
My problem occurs when I set the width
of the div
s to 100%
.
Here is my code:
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
#nav {
line-height: 60px;
background-color: #FFFFFF;
min-height: 60px;
width: 100%;
left: 0px;
text-decoration: none;
}
#nav a {
font-family: sans-serif;
font-size: 25px;
text-decoration: none;
float: left;
margin-left: 10px;
}
#section {
min-width: 50%;
min-height: 479px;
float: left;
}
#section p {
font-family: sans-serif;
font-size: 20px;
}
#footer {
background-color: black;
color: white;
clear: both;
text-align: right;
line-height: 40px;
height: 40px;
}
#footer p {
margin-right: 30px;
}
Is there something I need to change to get rid of the white edges around the div, I have tried things to get rid of it but none of them seem to work, any help would be greatly appreciated.
Upvotes: 0
Views: 4798
Reputation: 17
are you talking about the white edges around the website then use
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
Upvotes: 0
Reputation: 60563
body
has a default margin
across browsers so you need to reset that margin
.
so add this
body {
margin: 0
}
Upvotes: 2