新手CSS格式问题：JavaScript秒表初始数字无法居中

这是我在本平台的第一个问题，希望格式正确。我跟着一个DOM操作课程制作JavaScript秒表，但初始显示的“00:00:00”始终无法居中，对比教程代码后仍找不到问题根源，附上我的代码与教程代码，恳请大家帮忙排查。

我的HTML代码 #

<body>
    <div class="container">
      <div id="timer">00:00:00</div>

      <div class="buttons">
        <button id="startStopBtn">
          <i class="fa-solid fa-play" id="play"></i>
        </button>

        <button id="resetBtn">
          <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
        </button>
      </div>
    </div>

教程的HTML代码 #

<div class="container">
        <div id="timer">
            00:00:00
        </div>
        <div class="buttons">
            <button id="startStopBtn">
                <i class="fa-solid fa-play" id="play"></i>
            </button>
            <button id="resetBtn">
                <i class="fa-solid fa-arrow-rotate-left" id="reset"></i>
            </button>
        </div>

我的CSS代码 #

body {
  height: 100vh;
  background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-  empty-pool.jpg)
    no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 60%;
  height: 250px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 3px;
}

#timer {
  width: 100%;
  font-size: 72px;
  text-align: center;
  margin: 0px auto;
  padding: 35px;
}

.buttons {
  text-align: center;
}

.button {
  margin: 0 10px;
  border: none;
}

button i {
  font-size: 2rem;
  padding: 10px;
  color: #fff;
  width: 50px;
}

#play {
  background-color: green;
}
#pause {
  background-color: orange;
}
#reset {
  background-color: red;
}

教程的CSS代码 #

body {
    height: 100vh;
    background: url(img/project-4.jpg) no-repeat center top / cover;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .container {
    width: 60%;
    height: 250px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow:  0 0 3px;
   }
   #timer {
    width: 100%;
    font-size: 72px;
    text-align: center;
    margin: 0px auto;
    padding: 35px;
   }
   .buttons {
    text-align: center;
   }
   button {
    margin: 0 10px;
    border: none;
   }
   button i {
    font-size: 2rem;
    padding: 10px;
    color: #fff;
    width: 50px;
   }
   #play {
    background-color: green;
   }
   #pause {
    background-color: orange;
   }
   #reset {
    background-color: red;
   } 

问题排查与解决方案 #

1. 核心问题：盒模型导致宽度溢出
   你的#timer设置了width: 100%和padding: 35px，但默认盒模型（box-sizing: content-box）下，padding会额外加到宽度上，导致#timer实际宽度超出父容器.container，文字自然无法居中。

   解决方法：给#timer添加box-sizing: border-box，让padding包含在宽度内：

   #timer {
     width: 100%;
     font-size: 72px;
     text-align: center;
     margin: 0px auto;
     padding: 35px;
     box-sizing: border-box; /* 添加此行 */
   }
   

2. 次要问题：按钮样式选择器错误
   你的CSS里写的是.button（类选择器），但HTML按钮没有button类，导致按钮的margin: 0 10px样式不生效。需改成标签选择器button：

   button {
     margin: 0 10px;
     border: none;
   }
   

3. 额外细节：背景图URL空格问题
   背景图URL中的Underwater- empty-pool.jpg有多余空格，可能导致图片加载失败，建议修正为正确的文件名格式。

内容的提问来源于stack exchange，提问作者morpole