HTML and CSS - Tribute page FCC trouble - html

Question

The above link is the html and css for a tribute page I am creating for a FCC challenge. I have been having trouble adding padding to my .life and .work divs.
Also as you can see at the minute my text is not contained to the div. I have been googling this problem for a couple of hours now and all the solutions have not worked for me.
Can anyone help me out?
Ideally I would like those grey divs slightly rounded off, centered, with the text confined to the div.
codepen

Answer 1

Are you looking for something like this?
body {
margin-top: 60px;
}
img {
border-radius: 10%;
max-width: 50%;
display: block;
margin: auto auto 30px auto;
}
.life {
background: darkgrey;
max-width: 80%;
margin: 20px auto;
border-radius: 25%;
padding: 25px 50px;
}
.work {
background: darkgrey;
max-width: 90%;
margin: 20px auto;
padding: 25px 50px;
}
.wiki {
margin-top: 50px;
}
<div class="container">
<div class="jumbotron">
<h1 class="text-center">Zach Braff</h1>
<h2 class="text-center"><em>Actor Director Writer Producer</em></h2>
<img src="https://pbs.twimg.com/profile_images/588958455370625025/xm8yowKs.jpg" alt="Zach Braff">
<div class="life">
<h3 class="text-center">His life (summarised)</h3>
<p>Born in 1975, Zach Braff grew up in New Jersey and began acting at an early age. He got his first acting job on a TV pilot at age 14, with his first film role coming a few years later. After graduating from Northwestern University's film school,
Braff returned to acting, appearing in several small movies. His big break came in 2001 when he landed one of the lead roles on the TV comedy Scrubs. The show was a hit, and Braff became a household name. This success led to others, such as his
writing, directing and starring in Garden State, a critically acclaimed indie film, and landing a role in 2013's big-budget movie Oz the Great and Powerful.</p>
</div>
<div class="work">
<h3>His Work (some of)</h3>
<ul>
<li>Scrubs</li>
<li>Garden State</li>
<li>Oz the Great and Powerful</li>
<li>Wish I Was Here</li>
<li>Going In Style</li>
</ul>
</div>
<p class="text-center wiki"><em>Read more about Zach Braffs life and work here</em></p>
</div>
</div>
<footer>
<p class="text-center">Personal project for FCC's assignment 'Build a Tribute Page</p>
</footer>

Answer 2

Do you want something like this?
Solution
Changes:
.life {
background: darkgrey;
max-width: 80%;
margin: 20px auto;
padding:4em;
border-radius: 25%;
}
.work {
background: darkgrey;
max-width: 90%;
padding:4em;
margin: auto;
}
I just added padding to both the classes and it worked!