Tribute page - padding/margin problems in div

1

Hey Guys!

So im currently working through y tribute page challenge and have came across a problem that all the googling and playing around havent been able to fix.

The problem I am having is the two divs I am using for my life summary and my work summary. I am trying to create some padding between the text and container and I am failing! (There is also a problem with the text not changing size when adding css!)

I think this has something to do with collapsing margins? I remember reading about this problem occurring but so far I have been unable to solve this problem! My goal is to round off the corners of the divs and have some space between it and the text.

Any help you guys can give me would be much appreciated! Thanks

https://codepen.io/marchibald92/pen/LLedBX?editors=1100

2

Add something like this to your .life and .work classes:
padding: 10px; (for space between text and edge of div)
border-radius: 5 px; (for rounded corners)

3

This would help:

.life {
    background: darkgrey;
    max-width: 90%;
    margin: auto;
    padding: 50px;
}

.life p {
    font-size: 50px;
}

I agree with cheyrl about the border radius too - even a subtle one of 2px has an unconscious effect.

4

The problem im having is when I do that the div extends up the way instead of the text moving away from it (if that makes sense).

5

Another way of explaining it is I want my text to be stuck inside the div. as you can see it overflows on this attempt.

https://codepen.io/marchibald92/pen/LLedBX?editors=1100