Wrapper div doesn’t cover 100% of the viewport width
-
I’m using the Astra theme but am writing my own plugin to do a contact form the way i’d like it to look. I have a ‘wrapper’ div that i’d simply like it to cover the entire width of the page. Unfortunately, there always seems to be some sort of hidden margin on the left and right that constrains the div from covering 100% of the screen. I’m new to the Astra theme, but not to CSS, and when i use developer tools to inspect the div, i don’t find anything that would suggest a margin set of any type. Indeed, in my css, i set the margin and padding to 0 and that seems to have no effect(?). Even specifying ‘!important’ has no effect. If i DO set a margin (say ‘2rem’ all the way around), that DOES have the desired effect, but on top of the margin that is already visible. So, i’m baffled and wondering if there’s a setting either in the Astra theme itself or maybe even in WordPress that anyone can suggest that i could examine as a way to control this behavior? Here’s my CSS for the div:
body { margin: 0px!important; background-color:lightblue; padding: 0!important; text-align:center; border: 10px blue solid; } .wrapper { display: inline-block; width:100%; //max-width has no effect, using 100vw still uses the left margin and pushes the rest of the div off the screen to the right. height:100%; background-color:#BFF4FF; margin: 0!important; //!important has no effect. padding: 0!important; //important has no effect. border: 10px red solid; }
p.s. If i remove the wrapper entirely and simply place the form on the body, the problem continues to exist and the margin is even larger. If anybody has a suggestion of something to look at, i’m all ears. I’m baffled by this one. Thanks for looking, cheers!
- The topic ‘Wrapper div doesn’t cover 100% of the viewport width’ is closed to new replies.