HTML/CSS开发中列表li元素左侧轻微错位的原因及解决方法

这是浏览器默认样式导致的问题：浏览器内置的用户代理样式表默认会给无序列表<ul>添加padding-left: 40px的左内边距，用来预留默认列表符号的显示位置。你虽然给li设置了list-style: none隐藏了列表项符号，但没有清除<ul>自带的默认左内边距，所有li都会被这段内边距整体向右挤，就出现了左侧空出距离、右侧正常撑满容器的错位现象。

直接给.tasks容器内的ul清除默认内外边距即可，在原有CSS代码中追加以下规则：

.tasks ul {
  margin: 0;
  padding-left: 0;
}

如果要从根源避免后续其他列表出现同类问题，可以在CSS开头添加全局列表重置样式：

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

额外调整提示：当前你给li设置的margin: .4rem是上下左右四个方向都带外边距，清除ul默认边距后，li左右两侧会各留0.4rem的间距。如果想要li完全贴合容器左右边缘，把li的margin属性改为margin: .4rem 0;仅保留上下外边距即可。

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