网站的 .PNG 徽标在移动/响应视图中偏离中心，但仅在桌面浏览器视图中正常

Question

Here's the website in question。如果您在桌面浏览器（我尝试过 Chrome、Firefox、Edge）上查看该站点，它看起来还不错。但是，当您在任何移动设备上查看它时，顶部徽标会偏离中心并且位于错误的位置 - screenshot。

这是我的 index.html 文件中的相关代码行：

<header id="header">
    <div class="logo">
        <span class="imagetop"><img src="images/TTM-Logo3.png" alt="" /></span>
    </div>

这是我的 .css 文件中的代码：

.imagetop {
        position: relative;
        transform: translate(-50%, -50%);

几天前我以为我已经解决了这个问题，但不幸的是它又困扰着我。我什至尝试回滚到该网站的先前版本，但仍然遇到同样的问题。

有什么想法可以让徽标在桌面和移动设备上正确居中吗？

Answer 1

这是因为响应式 width 和 height 覆盖了默认样式（736px 和更小）。重置代码应使其恢复正常。您只需设置以下内容：

@media screen and (max-width: 736px) {
    #header .logo {
        width: 100%;
        height: auto;
        line-height: initial;
    }
}