CSS设置<ul>元素居中布局时出现额外空间占用问题求助

你看到的绿色区块是浏览器内置的默认用户代理样式给<ul>元素预设的左内边距：为了适配列表默认的项目符号（圆点、序号等）缩进展示，所有主流浏览器都会给<ul>、<ol>类列表元素默认设置40px左右的padding-left值，你没有手动清除这个默认样式，就会出现这块额外占用的空间。

直接在你的.upper-center样式规则中添加默认内外边距清除的声明即可，修改后的代码如下：

.upper-center {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     /* 新增样式清除默认内外边距 */
     margin: 0;
     padding: 0;
     /* 如果需要同时清除li的默认项目符号，可新增以下声明 */
     list-style: none;
}

如果要避免后续其他元素也出现类似默认样式导致的布局异常，建议在项目全局样式最开头添加通用重置规则：

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

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