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

Javano Collins
Javano Collins
5,371 Points

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 ---- */
Michael Cook
Michael Cook
12,808 Points

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.

2 Answers

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 18,450 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.