我无法找到错误答案

【问题标题】：I’m having trouble finding the bug我无法找到错误
【发布时间】：2022-04-30 23:56:28
【问题描述】：

我正在尝试将这个列表项直接排列在 hours div 标签的下方。我的列表项被推到了右边一点，我似乎无法找出原因。我的 HTML 和 CSS 技能是初学者。

我确实关注了一个 YouTube 视频，但不知道我做错了什么。

#hero h2{
  display: block;
  width: fit-content;
  font-size: 2rem;
  position: relative; 

}

#hero ul li{
  display: block;
  width: fit-content;
  font-size: 1.5rem;
  position: relative;
}

.hours ul {
  margin: 0;
  padding: 0;
}

.hours li{
  list-style: none;
}

.hours li {
  text-decoration: none;
  color: black;
  padding: .5rem;
  display: block; 

}

    <section id="hero">
  <div class="hero container">
    <div class="">
      <h2>Hours</h2>
      <div class="hours">
       <ul>
        <li><b>Mon-thurs: </b>9am - 5pm<span></span></li>
      </ul>
     </div>
    </div>
  </section>

【问题讨论】：

请注意，您缺少<div class="hero container"> 的结束 div。此外，这是学习一些基本调试的好时机。您的列表项上有默认填充，您的开发工具检查员会显示给您

标签： html css

【解决方案1】：

你的.hours li 有padding: .5rem 这就是原因。
您可以设置padding:.5rem 0 以更好地对齐。

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
}

#hero h2 {
  display: block;
  width: fit-content;
  font-size: 2rem;
  position: relative;
}

#hero ul li {
  display: block;
  width: fit-content;
  font-size: 1.5rem;
  position: relative;
}

.hours ul {
  margin: 0;
  padding: 0;
}

.hours li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours li {
  text-decoration: none;
  color: black;
  padding: .5rem 0;
  display: block;
}

<section id="hero">
  <div class="hero container">
    <div class="">
      <h2>Hours</h2>
      <div class="hours">
        <ul>
          <li><b>Mon-thurs: </b>9am - 5pm<span></span></li>
          <li><b>Mon-thurs: </b>9am - 5pm<span></span></li>
          <li><b>Mon-thurs: </b>9am - 5pm<span></span></li>
          <li><b>Mon-thurs: </b>9am - 5pm<span></span></li>
        </ul>
      </div>
    </div>
</section>

【讨论】：