container-fluid leaving blank space

Question

I want to use a full width div, so added container-fluid class which leaves blank space on left and right. I solved it using negative margin left and right. But the problem is the negative margin afftects bootstrap responsive nature. When I resize the left side contents are hidden and there is a horizontal scrollbar on resizing.

<div class="container-fluid">
<div class="row" style="background-color:gainsboro">
 <div class="col-md-10">
 </div>
 </div>
 </div>

Answer 1

All I did in this scenario is apply the following styling and no padding or horizontal scrollbars, works on small devices too.

.container-fluid{
  padding-left: 0rem;
  padding-right: 0rem;
  overflow: hidden;
}