HTML和CSS - Tribute页面FCC麻烦

Question

以上链接是我为FCC挑战创建的致敬页面的html和css。我在向def form_valid(self, form): super().form_valid(form) # if Python 3, else super(ItemUpdateView, self).form_valid(form) ... 和.life div添加填充时遇到问题。

另外，你可以看到我的文字不包含在div中。我一直在谷歌搜索这个问题几个小时，所有的解决方案都没有对我有用。

任何人都可以帮助我吗？

理想情况下，我希望那些灰色的div稍微圆整，居中，文本仅限于div。

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;
}

我刚刚在两个类中添加了填充，但它确实有效！