在移动设备或 iPad 上将方向从纵向切换到横向时，网站两侧会出现空白

问：

因此，在移动设备上切换方向时（最大宽度为 540px）时，我遇到了空白问题。 当我的手机方向为纵向视图时，该网站看起来不错，但是当我翻转到横向时，两侧都有空白（见屏幕截图）。 我尝试使用媒体查询在方向为横向时将 margin： 0 添加到我的父容器 （.wrapper） 中，但这也没有解决它。有谁知道我可能做错了什么？

* {
  box-sizing: border-box;
}

html{
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

.wrapper{ /* My parent container */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (orientation: landscape) {
  .wrapper {
    margin: 0;
  }
}