为什么我的html元素在使用媒体查询时会重复和重叠？

我正在尝试创建一个响应性强的登录页。我首先设计了一个移动版本，它似乎工作得很好，但是当我尝试对桌面版本使用媒体查询时，html的元素似乎重复和重叠。这是我的第一个网络开发项目，我试图形成一个网站称为前端梅托，所以请与我忍受

我的Html:
前端Mentor |包含单个介绍部分的蜷缩登录页
无法复制，如果您可以复制，将“最小宽度”更改为“最大宽度”，然后将桌面图像隐藏在较小的屏幕上，这将非常有用。首先，我可以看到您正在使用“背景”属性，它是与背景相关的多个参数的快捷方式。当您再次在媒体查询中使用“背景”时，背景颜色属性将返回到其初始状态（此处为“白色”），因此您需要重新定义它。我建议您使用浏览器的开发人员控制台来发挥您希望为网站提供的样式的可能性。@Sameer Khan。好的，刚刚发布了JSFIDLE链接。但它的显示方式与我的浏览器不同。