HTML & CSS - Mobile First

@JeuriMorel i didnt know that there is a rule for that :) but i wanted to ask do u know how to center the container vertically and horizontally inside the body ? if it's like this

@JeuriMorel im trying to use this method but some times it doesnt work !

body, html { min-height: 100% }

.container { height:100% ; position: absolute; left: 50%; right; 50% transform: translate(-50%, -50%) }

@AbdallahNoor The easiest way to center a child inside a parent is probably like this:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

That being said, the <main></main> tag should be a direct child of the body.

@JeuriMorel ok noted that the main element should be the direct child of body

Now i set main under body And div . container under main Still when i try to center the whole content With flex it wont work like this:

main { display: flex; justify-content: center; align-items: center; }

@AbdallahNoor

Try taking off

main {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@JeuriMorel it works but now there is another problem ! when adding margins to div.container top / right / left are fine but bottom there is no margin showing

its like the div.container height is exceeding main height ! is it because im using display:grid in div.container ?

@JeuriMorel oh i figured it out adding overflow auto to main fixed it ! thanks alot man ;)

@AbdallahNoor Good job! :)