CSS CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

My footer has a bottom margin/padding when the browser is in full size. I don't know why.

Only when my browser is increased to full size the margin/padding bottom appears in the footer.

/* ================================= 
  Base Element Styles
==================================== */

body {
    line-height: 1.6;
    color: #3a3a3a;
}

a { 
    color: #fff;
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Layout Containers ---- */

.container {
  width: 70%;
  margin: 0 auto;
}

.main-header {
    background: #3acec2;
  padding: 1em 0;
}

.main-footer {
  text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}

/* ---- Page Elements ---- */

Could you create a snapshot of your project and link it here? It would be easier to tinker with it and figure it out if I could see it.

3 Answers

virus200
virus200
6,171 Points

I did some searching on StackOverflow and this was the change I made to get it to work.

.main-footer {
  text-align: center;
  padding: 2em 0;
  background: #d9e4ea;
  position: fixed;
  bottom: 0;
  width: 100%;
}
Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,837 Points

Hi Javano

What browser are you using?

Can you give a screenshot?

There could be a potential browser default making this happen

Shawn Rossouw
Shawn Rossouw
2,834 Points

If you have any elements inside your footer, check with dev tools if maybe not one of those is causing the issue.