How to give margins within two col-sm-6 grid boxes?

Question

<div class="container">
  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">    
    <h3 id="chicken">Chicken</h3>
    ...
  </section>
  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">    
    <h3 id="beef">Beef</h3>
    ...
  </section>

I want to give some margins between two boxes which are located in col-sm-6 each.

I also want the length of two boxes matches well with the last col-sm-12 box.

How I can do this? If i give margins like this,

    @media (min-width: 768px) and (max-width: 991px) {
  section {
    margin-right: 2%;
  }
}

then the second box goes down..

Thanks for your support, I solved it!

<div class="container">
    <h2>Our Menu</h2>
    <br><br>
    <div class="col-md-12 col-sm-6 col-xs-12">
      <div class="eachmenu">
        <h3>Chicken</h3>
        ...
      </div>
    </div>
    <div class="col-md-12 col-sm-6 col-xs-12">
      <div class="eachmenu">
        <h3>Beef</h3>
         ...
      </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="eachmenu">
        <h3>Sushi</h3>
           ...
      </div>
    </div>
</div> <!-- container-->

also changed with css file..

.eachmenu {
  position: relative;
  height: auto;
  background-color: rgb(47, 218, 146);
  float: left;
  border: 1px solid black;
  margin-bottom: 20px;
  padding-left: 2%;
  padding-right: 2%;
}

/* START SM */
@media (min-width: 768px) and (max-width: 991px) {
  .eachmenu {
    margin-right: 2%; => I erased it (it didn't match when 6-6-12 }
}
/* End SM */

and...

(Edited) (Erased margin-right:2% in media query => matches well now)

Answer 1

Using style on section is quite dangerous since it will affect any section of your code. Better attribute a class and put it where you need. Also, there's a @media attribute quite specific, which it's working only on width between 768 and 991px.

EDIT

I saw from the screenshot what you're aiming is to set a border, or maybe a color around that section. Usually you first set up the grid, or skeleton of your website, then inside you can play around. This is because otherwise you will fight forever with spacing.

  .right-space {
      margin-right: 2%;
  }

and

  <section class="eachmenu col-md-12 col-sm-6 col-xs-12">   
   <div class="right-space">My content</div>

So as you can see, the section will define in which space we can move, then my div inside it will contain the border, the decoration and the content so it will adjust accordingly the bigger container.

Answer 2

You may use the col- class without a number but the breakpoint ( .col-sm , .col-md , .col-lg , .col-xl ) and also the m (for margins) class with the breakpoint as well and the value you need. both your column are of the same size, built-in class should do without custom CSS (see equal column ).

possible example:

 section { background: gray;/* see us */ }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <section class="eachmenu col-md-12 my-2 col-sm mr-sm-2 col-xs mr-xs-2"> <h3 id="chicken">Chicken</h3>... </section> <section class="eachmenu col-md-12 col-sm my-2 mx-md-0 ml-sm-2 col-xs ml-xs-2"> <h3 id="beef">Beef</h3>... </section> <section class="eachmenu col-12 my-2 "> <h3 id="duck">Duck</h3> <p class="bg-info text-white p-1"> run in full page mode, then resize the window.</p> </section> </div> </div>