Remove margin or padding from a "grid container"

Hi there,

You will need to give that <div> a second class like alert-box so you can target it with CSS:

.grid-container.alert-box {
    padding: 0;
}

The site you linked also doesn't match the screenshot you've shown by the way.

Thanks Leo! Hmm, there is still padding though....

<div class="grid-container alert-boxes">

  <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
    <div class="alert-coupon">
      <a href="">This is an alert box.</a>
    </div>
  </div>

  <div class="grid-50 tablet-grid-50 mobile-grid-100 first-column">
    <div class="alert-sponsor">
      This is an alert box.
    </div>
  </div>

And here is the CSS:

.grid-container.alert-boxes {
    padding: 0;
}

(I changed .alert-box to .alert-boxes (plural) just b/c there is another reference to that name in the CSS).

Here is the actual URL: https://testinfosec.wpengine.com/events-in-2019/cyber-security-cloud-expo/

Maybe the parent container div also needs to have its' padding removed or made to zero?

Thanks Leo.

You can always use browser inspect to see where the padding is coming from:
https://www.screencast.com/t/Ov2LEqOT

Good skill to learn for web developing :)

So in this case, this CSS should work:

.alert-boxes .grid-50 {
    padding: 0;
}

Thanks Leo - worked great

No problem :)