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.
Safari browser v14.0 and below does not support margin-inline
Try to use margin: 0 auto
For more details visit: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline
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?