CSS Responsive Design - How to Manage Specific Selectors

I'm working on the CSS Layout Basics project here, and I'm having an issue styling my columns using responsive design.

I'm trying to design the site with mobile-first in mind. I have a header, and then below the header is my main content:

  <header class="main-header">
    header stuff omitted...
  </header><!--/.main-header-->   

  <div class="banner">
    <img class="logo" src="img/city-logo.svg" alt="City">
    <h1 class="headline">The Best City</h1>
  </div><!--/.banner-->

  <main>
    <div class="secondary col">
      <h2>Welcome!</h2>
      <p>Everything in this city is worth waiting in line for.</p>
      <p>some text....</p>
      <p>some more text...</p>
    </div><!--/.secondary-->

    <div class="primary col">
      <h2>Great food</h2>
      <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
      <p>some more text...</p>
    </div><!--/.primary-->

    <div class="tertiary col">
      <h2>How to get here</h2>
      <p><strong>Plane: </strong>some more text...</p>
      <p><strong>Train: </strong>some more text...</p>
    </div><!--/.tertiary-->
  </main>

The first div in main is too close to the header, so I tried to be clever and use a css pseudoclass selector to add a margin to only that element:

main .col:first-child {
  margin-top: 25px;
}

This works, but it creates a problem when i try to introduce columns with a media query. Here's my code:

@media (min-width: 769px) {

  main {
    text-align: center;
    margin: 0 auto;
  }

  .col {
    display: inline-block;
    text-align: left;
  }

  .secondary {
    vertical-align: top;
    width: 49%;
    margin-top: 0
  }

  .primary {
    width: 49%;
  }

  .tertiary {
    width: 100%;
  }
}

Written this way, the secondary column is offset from the primary column because it inherits the 25px margin from the main .col:first-child selector above, even though I set the top margin to 0 using .secondary { margin-top: 0; }. Apparently the psuedo class has higher specificity than the class secondary alone. I could fix it in a clunky way by addingmain .col:first-child { margin-top: 0 }`. But the problem with doing that is I want to the secondary column's top margin to be the same as the primary column's top margin, not necessarily 0.

This makes me want to avoid using pseudoclass selectors on the mobile section of my mobile-first websites. If I want to keep doing this using the pseudoclass, is the best way to do it to add another media query so the main .col:first-child selector only applies for mobile?

For example:

@media (max-width: 769px) {
  main .col:first-child {
    margin-top: 25px;
  }
}

Or is there a better way to accomplish this?