My footer flexbox CSS is working on various browsers and devices, but for some reason, Chrome on my iMac is not responding correctly. The website is www.batistaelectric.com. It works on my iPhone Chrome browser, Safari iPhone browser, iMac Safari browser, and even on Chrome preview from Brackets. However, after uploading it to the server, it does not display correctly on Chrome.
On Chrome browser on iMac, the footer stays inline instead of stacking in a column.
@media only screen and (min-width: 801px) {
.pv-header {
width: 100%
}
.pv-footer {
display: -webkit-box;
display: -moz-box;
display: - ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}<div class="pv-footer">
<div id="nav-a">
<ul>
<li>
<div class="button1">
<b><a href="about.html">About Us</a></b>
</div>
</li>
<li>
<div class="button1">
<b><a href="Disclaimer.html">Disclaimer</a></b>
</div>
</li>
<li>
<div class="button1">
<b><a href="https://www.iubenda.com/privacy-policy/13910995" class="iubenda-nostyle no-brand iubenda-embed" title="Privacy Policy ">Privacy Policy</a><script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src="https://cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script></b>
</div>
</li>
</ul>
</div>
<h3>Batista Residential Electric, INC.</h3>
</div>This is a snapshot of how it looks on my Chrome browser. It's not wrapping when collapsed, indicating that the flexbox CSS for the footer is not being recognized. footer on Chrome not stacking footer not wrapping