The Site disagrees on the responsive

Question

Well, inside the body, I put two Boxs, col-Md-6, with a 1px edge, but one was next to the other, and it was not meant to stay, then I put a margin-left of 28px, in the two Boxs on my left side of the screen, ie, second and fourth. Then separated, the ones of the left corner went to the limit of the Container, and the middle was no longer together, as in the image: http://prntscr.com/7w66t1 But when decreasing to see how to stay in responsive, the second and the fourth were not responsive due to the margin-left, follows the print of the pores, which should be in the same margin, 0, http://prntscr.com/7w67e1, this middle box, which shows the content and the last one, both on the left side that are at odds, The question is: How to use @media for when it has a dimension, for example: width: 600px, the margin-left does not exist?

Answer 1

Instead of placing the border on the element with col-Md-6, it creates another one inside. Ex:

<div class="col-md-6">
  <div style="border:1px solid #cor;">Lorem ipsum</div>
</div>

Or

@media(max-width:600px) {
  .col-md-6 {margin-left:0;}
}