user3261724 user3261724 - 7 months ago 10
HTML Question

how can i let the footer border to take the full width of the screen?

Hello i would like to know how can i let the border of the footer take the full width of the screen and also to get full width background on the footer, thanks in advance. :)

<html lang="en">
<head>
<meta charset="UTF-8">
<title>First</title>
<link rel="stylesheet" href="css/first.css">
</head>
<body>
<div id="header">

</div>



<div class="footer">
<p>This is the Footer</p>
</div>

</body>
</html>

#header {

background-color:#99283c ;
margin: 0px;
height: 90px;

}

body{

background-color: yellow;
margin: 0px;

}


.footer p{

margin-top:38%;
margin-left: 45%;
border-top: 1px solid black;
padding-top: 10px;
max-width: 100%;

}

Answer

You have to remove margin-left:45% from .footer p try below CSS:

.footer p {
    margin-top: 38%;
    text-align: center;
    border-top: 1px solid black;
    padding-top: 10px;
    max-width: 100%;
}

Check Fiddle

Comments