CSS nth-child() used in a media query isn't working

Question

I've been trying to set background to red and top margin only for the second CTA button in the mobile screen with the @media query as below.

@media screen and (max-width: 640px) {
  .send-submit-look-row:nth-child(2) .send-submit-look-col .send-submit-look-cta {
    background: red;
    margin-top: 1rem;
  }
}

HTML:

<div class="send-submit-look">
  <div class="wrap-x">
    <div class="inside">
      <div class="row send-submit-look-row">
                    <div class="col col-xs-12 col-md-4 send-submit-look-col">
              <picture>
                <source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-360x226.png">
                <source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-640x402.png">
                <source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1024x643.png">
                <source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1500x942.png">
                <img src="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1500x942.png" alt="">
              </picture>
              <div class="icon-title">SENDING A FEW GIFTS ONLINE?</div>
              <div class="icon-description" style="height: 95px;">Shop &amp; checkout online.
Easily ship to multiple addresses online.
Seamlessly add logos.
</div>
                            <div class="center-xs send-submit-look-cta">
                <a href="http://shop.packedwithpurpose.gifts/?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&amp;__hssc=198200880.20.1661831074692&amp;__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Shop Now">
                    Shop Now                </a>
              </div>
                          </div>
                    <div class="col col-xs-12 col-md-4 send-submit-look-col">
              <picture>
                <source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-360x226.png">
                <source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-640x402.png">
                <source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1024x643.png">
                <source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1500x942.png">
                <img src="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1500x942.png" alt="">
              </picture>
              <div class="icon-title">SUBMITTING A LARGE ORDER?</div>
              <div class="icon-description" style="height: 95px;">Personalize your business gifts.
Add your logo to the box and message card.
Bulk-ship to one address or drop-ship to 10,000+</div>
                            <div class="center-xs send-submit-look-cta">
                <a href="http://packedwithpurpose.gifts/submit-my-order?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&amp;__hssc=198200880.20.1661831074692&amp;__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Order Here">
                    Order Here                </a>
              </div>
                          </div>
                    <div class="col col-xs-12 col-md-4 send-submit-look-col">
              <picture>
                <source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-360x226.png">
                <source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-640x402.png">
                <source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1024x644.png">
                <source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1500x943.png">
                <img src="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1500x943.png" alt="">
              </picture>
              <div class="icon-title">LOOKING TO MAKE IT MEMORABLE?</div>
              <div class="icon-description" style="height: 95px;">Customize 50+ business gifts.
Utilize our Address Collection Service.
Include Branded Products.</div>
                            <div class="center-xs send-submit-look-cta">
                <a href="http://packedwithpurpose.gifts/gift-concierge?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&amp;__hssc=198200880.20.1661831074692&amp;__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Connect with an Expert">
                    Connect with an Expert                </a>
              </div>
                          </div>
                      </div>
    </div>
  </div>
</div>

It instead of doing that has increased the space between all three buttons and the text above above them. Here is the page

Image below shows where I want to apply this CSS.

Answer 1

Your CSS selector was incorrect. Here is the solution.

@media screen and (max-width: 640px) {
    .send-submit-look-col:nth-child(2) .send-submit-look-cta {
        background: red;
        margin-top: 1rem;
    }
}

Answer 2

Might be a simple issue as as not using the !important tag for your css class. I assume you're using a css system like bootstrap which may place priority for its own classes.

@media only screen and (max-width:640px) {

 .send-submit-look-row:nth-child(2) .send-submit-look-col .send-submit-look-cta {
    background: red;
    margin-top: 1rem;
  }
}