How to make the menu in bootstrap in the mobile version of the block adjacent to the edges?

Question

css

There is a simple structure:

<div class="container">
    <div class="row">
       <div class="col-xs-12 col-sm-9"> <!-- основной контент -->
              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
             этот блок повторяется неопределенное число раз 
             </div>     
        </div>
     <div class="col-xs-12 col-sm-3"><!-- боковая панель -->		
     </div>
    </div>
</div>

When displayed in mobile view, there are indents to the left and right of the blocks.
If you remove the indents (write zero in your css), then the blocks become butt on the desktop.
Task: remove padding in mobile view, should fit to the edges of the screen (remove paddings from col-xs-12, but how)

Answer 1

@media screen and max-width(320px){
.col-xs-12{
padding: 0;
}
}

You can choose the width of the screen depending on the device you are using.
Might need !important to override bootstrap padding.