I have interesting problem that I can't seem to see in the developer tools in chrome (in developer tools mode this does not happen but out of it does). When zooming, the div on the banner seemingly moves to right. This doesn't seem to be consistent as another user told me that div is moving at around 80% zoom, while I notice the div move around 67% in my browser.
Below is image that is what happening, you can see the text has moved to the center is not aligned with the white section/or background of the banner. It's almost as a margin-left is being added as the zoom with the page responsiveness.
I am using Google Chrome.
Here is the page in question:
https://geokeyaccess.com/gym-fitness-centers/
I tried adding a media query, but it doesn't seem to have an effect. An added note, this is in Wordpress with Divi, and I am use the customizer to add CSS. Here's sample of what I tried, sorry if it's a bit crude.
@media only screen and (max-width:768px)
{
#et_builder_outer_content > div > div > div.et_pb_section.et_pb_section_1.hardware-hero.apartment-hero.hero-part.et_pb_with_background.et_section_regular.et_section_transparent > div > div > div > div {
margin-left: -100px !important;
}
}
Please assist!