Did you use the workspace for this lesson, or carry over from the last one? I had this problem until I notice that Guil had added:

p:last-child {
  margin-bottom: 0;
}

to his css, thus removing the extra space between my wrap div and footer that was causing this problem.

None of this worked for me.

```/* Page Styles ================================ */

body { font: normal 1.1em/1.5 sans-serif; color: #222; background-color: #edeff0; }

html, body, .main-wrapper, .col { height: 100%; overflow: auto; }

/* .main-wrapper { width: 90%; margin: auto; } */

• { box-sizing: border-box; }

/* Layout Element Colors ================================ */

.main-header { background-color: #384047; } .main-logo { background-color: #5fcf80; } .main-nav li { background-color: #3f8abf; } .primary-content { background-color: #caebf6; } .secondary-content { background-color: #bfe3d0; } .main-footer { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout ================================ */

.main-header { padding: 20px; display: table; width: 100%; min-height: 150px; }

.main-logo, .main-nav, .main-nav li { display: inline-block; }

.main-logo, .main-nav { display: table-cell; vertical-align: middle; }

.main-logo { width: 120px; }

.main-nav { padding-left: 50px; }

.main-logo, .main-nav li { border-radius: 5px; }

.main-nav li { margin-top: 15px; margin-right: 10px; }

.main-logo a, .main-nav a { color: white; text-decoration: none; display: block; text-align: center; padding: 10px 20px; }

.main-footer { text-align: center; padding: 20px; }

/*

Column Layout

*/

.col { display: inline-block; padding: 20px; margin-right: -5px; vertical-align: top; }

.primary-content { width: 60%; }

.secondary-content { width: 40%; }

/*

Media Queries

*/

@media (max-width: 768px) { .main-logo, .main-nav, .main-nav li { display: block; width: initial; margin: initial; }

.main-nav {
    padding-left: initial;
}

.main-nav li {
    margin-top: 15px;
}

}```

Thank you so much for pointing this out! No one else came close to recognizing this problem in their questions; nice catch! I'm not really sure how or why that affects the calculation. If you really wanted to you could probably read the RFC, but I can think of better ways to spend my time lol. I dug into this a little more, and I've put some details below.

The calc function as it is provided in this example is enough to remove the scroll bar in Mozilla Firefox 44.

Setting overflow: auto removes the scroll bar in Google Chrome 48. I inspected the bottom margin on the last paragraph, which is 16px. Commenting out overflow:auto and changing the min-height calc function from calc(100vh - 89px) to calc(100vh - 105px) had the same effect, because of the 16px difference.

Interestingly enough in Internet Exploder 11, the overflow:auto setting reduces the size of the scroll bar but does not remove it entirely. I checked and in both Chrome and IE the line height of the footer text is actually 25.6px. I am assuming this is interpreted differently in Chrome than IE. As a test, I commented out overflow:auto and then changed the calc function from calc(100vh - 89px) to calc(100vh - 106px), one 1px more to accommodate for that extra .6 px, and that was enough to make the scroll bar go away.

Looks like there is no exact way to get this to work uniformly across all the major browsers, but since overflow:auto works for Chrome and doesn't break anything for Firefox, I am going to STICK with that for sticky footers. With Chrome currently having 68% market share and Firefox 19%, that's good enough for me.

Thanks again!