HTML和CSS - 致敬頁面FCC麻煩

Question

以上鍊接是我爲FCC挑戰創建的致敬頁面的html和css。我一直無法添加填充到我的.life和.work divs。

此外，正如你可以在當時看到我的文本不包含在div中。我一直在使用這個問題幾個小時，所有的解決方案都沒有爲我工作。

任何人都可以幫我嗎？

理想情況下，我希望那些灰色的div有一些四捨五入，居中，文本侷限於div。

codepen

Answer 1

你在找這樣的嗎？

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

你要這樣呢？

Solution

變化：

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

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

我剛添加填充到兩個類和它的工作！