Why margin doesn't work

There are social media icons in the bottom of the page, margin-bottom doesn’t work there, idk why.

I’m not sure if this was what yo9u were trying to do. I am new to this as well, but I enjoyed fiddleling with it lol.

#social {
  background-color:brown;
  text-align:center;
  position:relative;
  bottom:-40em;
  width:100%;
  
 
}
.fab, #profile-link{
  position:absolute;
  margin-bottom:20px;
  position:relative;  
} As

It is because the <a> elements are inline elements. If you set them to inline-block (or block) the margin will work as expected.

Quick example:
https://jsfiddle.net/6jck8mdv/

BTW, I’m not sure why you have given the #projects section a height of 200px, but that is not going to work.

Thank you for example. Why height isn’t gonna work?

Thank you for example. Why height isn’t gonna work?

Because you have more content than what can fit inside a 200px high container.

Also, it is rarely a good idea to give container elements a fixed height. They should grow as needed, governed by the content inside.

Should i use display:inherit; for this purpose?

Not sure what you mean by that? I don’t really ever use inherit on the display property. It is more clear what the value is if you just set it to whatever is needed.

What I mean is you do not limit container dimensions unless there is a good reason for it. Like for example setting a max-width on a container makes sense, but setting a fixed height rarely does (not saying it can’t for some very specific cases).

Take your portfolio section for example. If you set a fixed height you will get an overflow when you have to stack all the project elements in one column, which you have to do at some point to fit them at lower screen widths. The amount of vertical space needed to contain all the project elements will change depending on how many you have horizontally or vertically. So the container needs to be able to grow in height as needed by the content inside it.

okay, thank you for advice. I’ll try to not specify height