I am at a loss and hoping you guys can help. I built my site using bootstrap 4.1, my website is http://www.visionary-creatives.com/ It seems to function as expected in chrome, firefox, and opera and IE. When I run it on Safari there is a white space on the right side, giving it a side scrolling function which is not intended.
I've gone through it line by line and checked width, and there doesn't appear to be overflowing which is causing it. I've also tried adding
html, body {
width:100%;
overflow-x:hidden;
}
This worked to fix the white space that's rendering. Unfortunately it also disabled my navbar from scrolling on those websites as well, and completely disabled mobile navigation. Sorry I don't have the entire code posted here, it's obviously long. If this question has been answered I'm sorry, I checked and couldn't find an answer regarding this.
In your bootstrap.css, find line #571:
#devDiv1, #devDiv2, #devDiv3 {
margin-top: 85px;
margin-bottom: -24px;
position: relative;
height: inherit;
perspective: 150px;
perspective-origin: 0 50%;
cursor:pointer;
}
Add overflow: hidden; there.