如何移除列表样式(list-style)占用的额外空白？

<ul>元素默认带有padding-left样式，即便给列表项设置了list-style: none隐藏标记，这个默认内边距依然会占用空间，导致列表项无法在容器内完全居中。

只需给.container类添加padding-left: 0;，清除<ul>的默认内边距即可解决：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Games Played</title>
    <style>
      body {
        margin: 0;
        box-sizing: border-box;
        min-height: 100vh;
        background: linear-gradient(to bottom, blue, white);
        display: flex;
        justify-content: center;
      }
      .container {
        margin-top: 2rem;
        border: 4px solid black;
        height: 20rem;
        width: 15rem;
        flex-direction: column;
        align-items: center;
        display: flex;
        justify-content: space-evenly;
        border-radius: 5%;
        padding-left: 0; /* 添加这行代码清除默认内边距 */
      }
      .game {
        padding: 5px;
        text-align: center;
        width: 10rem;
        border: 2px solid black;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <ul class="container">
      <li class="football game">Football</li>
      <li class="basketball game">Basketball</li>
      <li class="boxing game">Boxing</li>
      <li class="tennis game">Tennis</li>
      <li class="golf game">Golf</li>
    </ul>
    <!-- <div class="container">
      <div class="game1 game">FootBall</div>
      <div class="game2 game">Basketball</div>
      <div class="game3 game">Boxing</div>
      <div class="game4 game">Tennis</div>
      <div class="game5 game">Golf</div>
    </div> -->
  </body>
</html>

修改后，列表项就能在容器中完全居中显示了。

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