How can I keep a W3.CSS container margin consistent with a Bootsrap alert margin?

Question

Question Information

Here I have a Bootstrap (Version 4.0.0 beta 2) alert with a margin of 5% on each side. I also have three W3.CSS cards nested inside a w3 container that are each 31% of the container size and a 1% margin on each side per card.

Desired Result:

I want the card's container to have a 5% margin on each side with each of the cards having a 1% margin in between each. So far the two cards on the left and right do not have the same margin with the alert on top.

Current Result:

Expected Result:

HTML:

<div class="alert alert-success" role="alert" style="overflow: hidden;">
  This is the bootsrap alert I want the column's container to have the same 5% margin on both sides as.
</div>
<div class="w3-container">
  <div class="w3-panel w3-card w3-yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
      augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
  </div>
  <div class="w3-panel w3-card-2 w3-yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
      augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
  </div>
  <div class="w3-panel w3-card-4 w3-yellow">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mattis dapibus aliquam. Nam ornare mollis sodales. In mollis in elit ac eleifend. Integer ac volutpat nisl, id cursus lorem. Aenean pellentesque volutpat tortor in porttitor. Cras ultrices
      augue sit amet scelerisque hendrerit. Cras vel neque et justo posuere tempus volutpat pharetra lectus. Nam luctus condimentum bibendum.</p>
  </div>
</div>

CSS:

 .alert {
    margin-top: 10px;
    margin-right: 5%;
    margin-left: 5%;
    color: #fff;
    border: none;
    background-color: #2ecc71;
  }

  .w3-container {
    margin: 0 5%;
  }

  .w3-card,
  .w3-card-2,
  .w3-card-4 {
    float: left;
    width: 31%;
    margin: 0 1%;
    padding: 20px;
  }

I have also provided a JSFiddle Demo

score 1 · Accepted Answer · answered Dec 09 '17 at 18:33

Since you'r targeting the .w3-container, which is a parent of the w3-cards, you should be using padding instead of a margin:

.w3-container {
  padding: 0 4%;
}

I've set 4% for the left/right padding because of the 1% left/right margin of the w3-cards.

I've also changed the width of the w3-cards to 31.33% for accuracy and to remove the undesired space.

Updated fiddle

How can I keep a W3.CSS container margin consistent with a Bootsrap alert margin?

1 Answers1