代码导致段落右移及列表无项目符号的问题排查与修复

我希望段落能在容器内完美居中，但它始终被挤到屏幕右侧，且列表无法显示项目符号。我反复重写代码、咨询AI工具，还通过HTML和CSS验证器检测代码均无问题，但问题仍未解决。我尝试过以下操作：

• 为HTML添加about-list类以实现列表样式，但内容仍为单行
• 修改.about-list li的margin-bottom无效果
• 将.about-list的list-style-type从none改为disc无变化
• 添加.about-content的text-align:center后文本反而更靠右

当前代码 #

CSS代码 #

.about-section {
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Center items vertically */
  background-color: #5c4033;
}

.about-image {
  flex: 0 0 50%;
  /* Take up 50% of the width */
  padding-right: 0px;
  /* Add some spacing between image and text */
  padding-top: 10px;
}

.about-image img {
  width: 50%;
  /* Ensure image doesn't exceed its container */
  height: auto;
  /* Maintain aspect ratio */
  margin-left: 245px;
  /*added pace to the left*/
}


/* Style the rest of the content as needed */

.about-content h2 {
  font-size: 3em;
  /* Adjust heading size as needed */
}

.about-content {
  text-align: center;
  /* Center align the text */
}

.about-paragraph {
  text-align: justify;
  /* Justify the text within the paragraph */
}

.about-list {
  list-style-type: disc;
  /* Use disc as list style */
  text-align: left;
  /* Align list items to the left */
  padding-left: 20px;
}

.about-list li {
  margin-bottom: 10px;
  /* Add margin between list items */
}

HTML代码 #

<div class="about-section">
  <div class="about-image">
    <img
      src="Images/jonathan-borba-AgygcLrWRbk-unsplash.jpg"
      alt="About Image"
    />
  </div>
  <div class="about-content">
    <h2>About Lilac Valley</h2>
    <p class="about-paragraph">
      Escape to <em>Rustic Luxury</em> at Lilac Valley Farm Stay. Imagine waking
      up to the gentle sounds of a farmyard, surrounded by the breathtaking
      beauty of the <strong>Blue Mountains</strong>. Lilac Valley Farm Stay is
      your invitation to unwind and reconnect with nature in a beautifully
      restored luxury barn house. This hidden gem, lovingly renovated by local
      interior designer <strong>Marina Ye</strong>, offers a unique blend of
      rustic charm and modern comfort. Spread over four acres, the property
      boasts:
    </p>
    <ul class="about-list">
      <li>A stunning open-plan barn house, perfect for families or groups.</li>
      <li>An enchanting cottage garden bursting with colorful blooms.</li>
      <li>A refreshing plunge pool to cool off after a day of exploring.</li>
      <li>
        Friendly farmyard companions – sheep, chickens, ducks, and the
        ever-so-charming Rosie the goat.
      </li>
    </ul>
    <p>
      Lilac Valley Farm Stay has been a favorite amongst AirBnB guests and has
      even garnered attention online.
      <strong><em>Get ready for an unforgettable escape.</em></strong>
    </p>
  </div>
</div>

当前页面效果 #

问题原因 #

1. 内容被挤压到右侧：.about-image内的图片使用了固定值margin-left:245px，再加上.about-image本身占50%宽度，导致图片超出容器范围，挤占了.about-content的可用空间，使得内容被挤到屏幕右侧。
2. 列表项目符号不显示：.about-content设置了text-align:center，列表元素整体居中后，默认的项目符号因padding-left值不足，被移出了可视区域；同时flex布局的空间挤压也加剧了这个问题。

解决方案 #

修改CSS代码如下，解决两个核心问题：

.about-section {
  display: flex;
  align-items: center;
  background-color: #5c4033;
  /* 添加上下内边距，避免内容贴边 */
  padding: 10px 0;
}

.about-image {
  flex: 0 0 50%;
  padding-top: 10px;
  /* 用flex布局实现图片居中，替代固定margin */
  display: flex;
  justify-content: center;
}

.about-image img {
  width: 50%;
  height: auto;
  /* 移除导致溢出的固定margin-left */
}

.about-content h2 {
  font-size: 3em;
}

.about-content {
  flex: 1; /* 让内容块占据容器剩余全部空间 */
  text-align: center;
  /* 添加左右内边距，避免内容贴边 */
  padding: 0 20px;
}

.about-paragraph {
  text-align: justify;
  /* 限制段落最大宽度，提升可读性并实现居中 */
  max-width: 800px;
  margin: 0 auto 20px;
}

.about-list {
  list-style-type: disc;
  text-align: left;
  /* 增加左内边距，确保项目符号显示 */
  padding-left: 30px;
  /* 限制列表最大宽度并居中 */
  max-width: 770px;
  margin: 0 auto 20px;
}

.about-list li {
  margin-bottom: 10px;
}

修改说明 #

• 移除图片的固定margin-left，改用flex布局让图片在.about-image容器内居中，避免溢出挤压内容区。
• 给.about-content添加flex:1，确保它能占据flex容器的剩余空间，不再被图片挤压。
• 给段落和列表设置max-width并配合margin:0 auto，让它们在内容块内居中，同时避免文本过宽影响阅读。
• 调大.about-list的padding-left，确保项目符号能正常显示在可视区域内。

内容的提问来源于stack exchange，提问作者Teegan Larcombe-hogan