我是HTML的初學(xué)者，我正在制作我的第一個網(wǎng)站。

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 500;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff width=500;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp;</p>
  </div>
</div>

你只是在寬度值中遺漏了單位，所以你必須這樣做:

width: 500px;

.header {
  text-align: center;
  color: #ffffff;
  font-family: tahoma;
}

body {
  background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
  background-attachment: fixed;
}

.img {
  text-align: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 10px;
  color: #ffffff;
  width: 500px;
  margin: auto;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  color: #ffffff;
}

<div class="card">
  <p style="text-align:center;"><img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"></p>
  <div class="container">
    <h2 class="header">Hi, I'm rappatic.</h2>
    <p class="header">I code when I feel like it.</p>
    <p>&nbsp;</p>
  </div>
</div>

為了使這張卡居中，請在您的。卡片部分:

margin-left:auto;
margin-right:auto;

要設(shè)置某些內(nèi)容的寬度，可以使用width屬性:

width: 500px;
width: 50%;
width: 50vw;

您可以使用不同的單位，例如px(像素)%(頁面寬度的百分比)和vw(窗口寬度的百分比)。可能還有其他的，但這些是我所知道的。