每当在不同的设备上查看 HTML 文档时，CSS 对齐都会搞砸？

问：

我需要通过 css 对齐来显示我的网站的呈现和结构在所有设备上保持一致，而不是在设备之间搞砸？

我遵循了 Youtube 教程和编码训练营关于 css 应用程序的说明。HTML 文档中的 CSS 对齐方式仅在第一台设备上有效，但是当从另一台设备查看该 HTML 文档时，有问题的 css 对齐方式会严重混乱。如何让我的 html 文档的 css 对齐方式不会在设备之间被搞砸？

https://codepen.io/francis-mike-nathan/pen/OJdgLXO

css：

.topBox {
    background-image: url("https://i.imgur.com/rDDRGYE.jpg");
    background-attachment: sticky;
    background-position: 70% 45%;   
    background-repeat: no-repeat;
    background-size: 40%; 
    color: lightcyan;
background-color: slategrey;
}
img {
z-index: +1;
}
body {
    background-color: darkcyan; 
}
footer {
    text-align: center;
    padding: 3px;
    color: white;
    background-color: slategrey;    
}