CODEWITHSUNDEEP
javascripthtmlcss
Owenn Gimli
Owenn Gimli

Reputation: 121

Why does my website shift to the left on Safari?

Screenshot of My Website on Safari

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.

Upvotes: 3

Views: 700

Answers (2)

Masood
Masood

Reputation: 1594

Safari browser v14.0 and below does not support margin-inline

enter image description here

Try to use margin: 0 auto

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

Upvotes: 7

A Haworth
A Haworth

Reputation: 36627

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?

Upvotes: 2

Related Questions