When switching orientation from portrait to landscape on a mobile device or iPad, white space appears on the sides of the website

So I am having an issue with white space when switching orientation on mobile devices (when max-width 540px). The website looks fine when my phone's orientation is in portrait view, but when I flip to landscape, there is white space on either side (see screenshots). I have tried to add margin: 0 to my parent container (.wrapper) when orientation is landscape using media queries, yet this hasn't solved it either. Does anyone have any idea what I may be doing wrong?

* {
  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;
  }
}

Solution

Those white spaces are there on ipad because of the Apple's "notch"!

As you can see here: https://css-tricks.com/the-notch-and-css/ Apple reserved some safe area's on the web when notch came on their devices.

To avoid those, as guide suggested, you can use this meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">