Why does my website shift to the left on Safari?

Question

You are able to visit my website at here

This happens when I add this CSS styling:

.container {
  margin-inline: auto;
  width: min(90%, 70.5rem);
}

The reason i add this container is to restrict my contents from expanding when someone opens the website in a very large screen. This works fine with other browsers. Any help would be appreciated thank you.

Answer 1

MDN Web Docs: The margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

According to MDN web docs, Safari does not support margin-inline.

Try to use margin: 0 auto

For more information you can visit: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline

Answer 2

margin-inline is not supported by Safari, IOS Safari or Edge see so it probably isn't safe to rely on it given the ubiquity of Safari and the increasing use of Edge.

See https://caniuse.com/?search=margin-inline

Some other way of centering things on large screens will need to be used. Perhaps the more traditional left: 50% and transform: translateX(-50%) would help?