HTML et CSS - page Tribute Problème FCC

Question

Le lien ci-dessus est le html et css pour une page hommage que je crée pour un défi FCC. J'ai eu du mal à ajouter un rembourrage à mes divs .life et .work.

Aussi comme vous pouvez le voir à la minute mon texte n'est pas contenu à la div. J'ai été googler ce problème pendant quelques heures maintenant et toutes les solutions n'ont pas fonctionné pour moi.

Quelqu'un peut-il m'aider?

Idéalement je voudrais ces divs gris légèrement arrondis, centrés, avec le texte confiné à la div.

codepen

Answer 1

Vous cherchez quelque chose comme ça?

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 <a href = "https://en.wikipedia.org/wiki/Zach_Braff">here</a></em></p> 
 

 
    </div> 
 
</div> 
 

 
<footer> 
 
    <p class="text-center">Personal project for FCC's assignment 'Build a Tribute Page</p> 
 
</footer>

Answer 2

Voulez-vous quelque chose comme ça?

Solution

Changements:

.life { 
background: darkgrey; 
max-width: 80%; 
margin: 20px auto; 
padding:4em; 
border-radius: 25%; 
} 

.work { 
background: darkgrey; 
max-width: 90%; 
padding:4em; 
margin: auto; 
} 

Je viens d'ajouter un rembourrage aux deux classes et cela a fonctionné!