CODEWITHSUNDEEP
htmlcss
Gabe Dunn
Gabe Dunn

Reputation: 456

Header is fine, 100% width doesn't work on footer

On a page that I am currently working on, I have come across an error. When you view the page on desktop on certain computers, the header is perfectly fine with 100% width, but the footer needs extra width to be the full page width. Also, on some other computers, even adding the extra width doesn't work. These end up with a bit of space on the right side.

Any help would be greatly appreciated.

Site

CSS

Upvotes: 0

Views: 176

Answers (3)

Dhwani sanghvi
Dhwani sanghvi

Reputation: 475

Different browsers set different default CSS rules. Try including a reset.css or a normalise.css (Google for either one or for "reset vs normalise" to see the differences) to remove those defaults.

User agent style sheets are overridden by anything that you set in your own style sheet.So,here in your webpage body is set with margin.So,we have to explicitly add following code in css.

CSS

body{
margin:0
}

Upvotes: 1

Rohit
Rohit

Reputation: 1812

Add margin 0 on body:

body {
    margin: 0;
}

Remove extra width from .foot

 .foot {
    position: relative;
    background-color: rgb(41, 41, 41);
    margin-top: 50px;
    height: 100px;
    /* width: 100.8744%; */
    /* bottom: -8px; */
    /* left: -8px; */
}

Upvotes: 1

Mark
Mark

Reputation: 2071

You have multiple problems in your code.

Do this;

body {
  margin: 0;
}

footer {
  margin-top: 50px;
  background-color: rgb(41, 41, 41);
}

.foot {
  position: relative;
  height: 100px;
}

Upvotes: 2

Related Questions