html页面两侧留白，尝试清除所有标签padding和margin

问题遇到的现象和发生背景

登陆页面两侧留白

问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到登陆界面</title>
    <style>
        *{
            margin:0 0;
            padding:0 0;
        }
        body {
            margin:0px;
            padding:0px;
            border:0px;
        }
        /**/
        .container {
            position: relative;
            margin:0 0;
            padding:0 0;
            min-height: 160px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
        }
        .top{
            margin: 0;
            padding: 0;
        }

        .top .background {
            margin:0;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
        .top .earth {
            margin:0;
            z-index: 2;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="top">
        <img class="background" src="1.png"/>
        <img class="earth" src="地球.png"/>
        <p>在线打卡</p>
    </div>
</div>
</body>
</html>
运行结果及报错内容

img

我的解答思路和尝试过的方法

初始化css，将所有标签的padding和margin设置为0

我想要达到的结果

清除两侧白边

是不是你图片的问题，没有平铺

控制台打开检查控制台

这个明显是图片的尺寸 和你DIV的尺寸不匹配，你直接设置背景平铺，margin-left:0; margint-right:0;