CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
PipecockJackson
PipecockJackson

Reputation: 61

I can't get rid of right hand side padding/margin

I have an ASP.NET Web Form (using Bootstrap 3) which has a container-fluid with rows and then columns. I want the rows to stretch the full width of the screen. This works, however there is a small margin (or padding) to the right hand edge of the screen which I can't get rid of. It seems to be at body level. Not such a big issue, apart from the horizontal scrollbar appears at the bottom of screen to nudge the extra 15px - annoying. Can anyone help? Thanks!

<body style="margin-right:0px">
    <form id="form1" runat="server">
    <div> 
     <div class="container-fluid" style="margin-right:0px;padding-right:0px" >

Fiddle - if you look at the grey row at the top of the output, you can see it doesn't quite stretch full width. By the way, the inline style on most elements is an attempt to remove any right hand side padding/margins and eliminate the culprits.

Upvotes: 1

Views: 1461

Answers (2)

Hardik Gondalia
Hardik Gondalia

Reputation: 3717

.form-group margin was extra. Also please remove extra margin you have given everywhere. I've attached fiddler for clean code for you

.form-horizontal .form-group {
    /* margin-left: -15px; */
    /* margin-right: -15px; */
}

from Bootstrap CSS

Check Fiddler https://jsfiddle.net/5xqLbtak/

Upvotes: 0

Jon Harding
Jon Harding

Reputation: 4946

You just need to use standard Bootstrap grid. Remove excess styles. Make sure you always have a col-md* inside each row. Below is a link to your fiddler with out the scrollbar and no extra inline styles

Here is the link

Upvotes: 1

Related Questions