Jump to content
mojetevil

margin-right in my body

Recommended Posts

Hello, I can not delete the right margin of my page, it is all with 100% width but the header and the footer (which have a fixed position) are wider, I attach capture. I wordk with Bootstrap 4 files

Regards

Captura.JPG

Captura2.JPG

Share this post


Link to post
Share on other sites

Its a 15px padding and margin gutter, on each side, if you do not follow the way bootstrap uses these correctly spaces will appear because -15px margins make container wider than intended.

The other option is to produce a '.gutterless' class specifically for removing these when required.

Share this post


Link to post
Share on other sites

* {box-sizing:border-box} will fitt padding, margin and border in total width: raccomanded

* is universal selector so apply in each, if fixes bad on other pages belive you could just put it a new external or internal reference or even inline as just command.

Should work out

Share this post


Link to post
Share on other sites

Thanks for the answers, but it does not work.

I have already tried everything, remove the bootstrap style padding, put the full width, remove the margins, create another class ... and the same thing keeps appearing, I do not know what can be

Share this post


Link to post
Share on other sites

If you use width: 100% on block elements with margin or padding, the total width will be 100% of parent element available width + margin and padding of this element.

Without access to this site, there's not much more we can suggest.

Share this post


Link to post
Share on other sites

First off, don't use container class on body, without it it will be 100% width, by default, also don't use deprecated center tags.

If you want a element  to be full width use container-fluid class, these container classes have padding either side of 15px, with a .row class within them, which has a -15px margin either side it will make this .row container same width as .container class, but! content will not go beyond padding.

IF you don't use .container classes without this padding and you use row class, because it does not have the same padding width to counteract -15px margin, these margin will extend beyond the 100% container width, larger than the browser width, so scrollbars will appear.

So like I mentioned before, use bootstrap as intended container classes outside, .row classes inside, OR create custommized .gutterless class (not part of bootstrap)

.gutterless, .gutterless > .row {
    margin: 0;
    padding: 0;
}

element texto-h2, and div elements without any class or container class with direct child elements using .row are the problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×