Can't add bottom margin to container

HTML-CSS
#1

As you can see in this Codepen, when the page reaches a width of less than 1052px, the last two boxes which I have in my container touch the end of the page and I can’t seem to be able to add a bottom margin to this container in order to fix it. I’ve tried everything and it won’t work!! How do I fix this?

#2

You’ve given your .main-wrapper a fixed height of 90vh, that’s why the content cannot expand further. If you want to make sure that the page takes up at least some height, you can use min-height instead (same for the body, and everywhere else where you restricted the heights).
Then you can add a margin-bottom (or padding-bottom) to either the .main-wrapper or the .content to create some space between the boxes and the end of the page.

#3

I changed all the heights to min-heights and it’s still not working…

1 Like
#4

Provoje në këtë mënyrë:

body, html {
    height: 200vh;
    font-family: 'Montserrat', sans-serif;
}
main{
height:100vh;
}

your body has to be biger then main
add height to the main

#5

Which element are you giving the margin-bottom? Giving it to the .box-btn will not work, because that ends where the grey colour starts, and that grey area is over 160px in height (you can change the current margin to something like 0 0 200px 0 , then you’ll see a gap).

But all of these should be working:

.content {
  margin-bottom:80px;
}
.content {
  padding-bottom:80px;
}
.main-wrapper {
  margin-bottom:80px;
}
.main-wrapper {
  padding-bottom:80px;
}

Whether you pick margin or padding will only make a difference if those elements have a different background-color than the body.

#6

wrapper is not closed you missing a
</div> in the end

#7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.