mojetevil Posted January 18, 2018 Share Posted January 18, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 18, 2018 Share Posted January 18, 2018 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. Link to comment Share on other sites More sharing options...
dlgalasso Posted January 18, 2018 Share Posted January 18, 2018 * {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 Link to comment Share on other sites More sharing options...
mojetevil Posted January 19, 2018 Author Share Posted January 19, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 19, 2018 Share Posted January 19, 2018 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. Link to comment Share on other sites More sharing options...
mojetevil Posted January 19, 2018 Author Share Posted January 19, 2018 3 hours ago, dsonesuk said: 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. http://pruebas.medac.es/landing1/index3.html Link to comment Share on other sites More sharing options...
dsonesuk Posted January 19, 2018 Share Posted January 19, 2018 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. Link to comment Share on other sites More sharing options...
dlgalasso Posted January 19, 2018 Share Posted January 19, 2018 Any outline to remove? Link to comment Share on other sites More sharing options...
mojetevil Posted January 29, 2018 Author Share Posted January 29, 2018 Thanks!! I solved it Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now