[SOLVED] How can I override the margin from a parent element on a child element in CSS (class and id)?

How can I override the margin from a parent element on a child element in CSS (class and id)?

I'm working on a section of a site where I have six boxes grouped together three on the top and three on the bottom, and I wanted to give them all a margin to separate them, but then I want the top ones to not have a margin-top so I did this:

.boxess {
  display: flex;
  flex-flow: column;
  margin: 1rem;
  width: min-content;
  background-color: white;
}

.boxess #boxes_1 #boxes_2 #boxes_3{
  margin-top: 0;
}

This did not override anything, and I don't think doing it box by box is the right answer either.

I also tried just one id at a time to see if that was the issue like so:

.boxess #boxes_1 {
  margin-top: 0;
}

Same result.

I also tried just selecting the id; tried negative values; using !important; initial (inheritance) and nothing once again.

I'm sure I've done something like this before, but maybe it was on paddings and those react differently when overridden?

Am I approaching this the wrong way?

Whole snippet here (added after due to suggestion):

.learning_content {
  background-color: whitesmoke;
  align-content: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.learning_content h2 {
  text-align: center;
  padding: 2rem;
}

.boxes {
  display: flex;
  flex-flow: row wrap;
  padding: 0 4.5rem 2rem 4.5rem;
  max-width: 66rem;
}

.boxess {
  display: flex;
  flex-flow: column;
  margin: 1rem;
  width: min-content;
  background-color: white;
}

.boxess #boxes_1 {
  margin-top: 0;
}

.boxess img {
  height: auto;
  width: 20rem;
}

.boxess p {
  text-wrap: wrap;
}

<div class="learning_content">
  <h2>It doesn't hurt to keep learning</h2>
  <div class="boxes">
    <div class="boxess" id="boxes_1">
      <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="Mac computers with software programming" />
      <h4>Software engineering</h4>
      <p class="subtitle">COURSES</p>
      <p>Web Development, Mobile Development, iOT, API's</p>
    </div>
    <div class="boxess" id="boxes_2">
      <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="A hand holding a phone over a coffe table with a coffe cup on top" />
      <h4>Computer Art</h4>
      <p class="subtitle">COURSES</p>
      <p>
        Imaging &amp; Design, Web Design, Motion Graphics, &amp; Visual Effects, Computer Animation
      </p>
    </div>
    <div class="boxess" id="boxes_3">
      <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="A person holding a camera at hip hight ready to shoot" />
      <h4>Design</h4>
      <p class="subtitle">COURSES</p>
      <p>User Experience Design, User Research, Visual Design</p>
    </div>
    <div class="boxess" id="boxes_4">
      <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="A laptop showing a graph with data" />
      <h4>Data</h4>
      <p class="subtitle">COURSES</p>
      <p>Data Science, Big Data, SQL, Data Visualization</p>
    </div>
    <div class="boxess" id="boxes_5">
      <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="Brown and bronze chess pieces on a chess board" />
      <h4>Business</h4>
      <p class="subtitle">COURSES</p>
      <p>Product Development, Business Development, Startup</p>
    </div>
    <div class="boxess" id="boxes_6">
      <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" alt="A smartwatch in a persons wrist" />
      <h4>Marketing</h4>
      <p class="subtitle">COURSES</p>
      <p>Analytics, Content Marketing, Mobile Marketing</p>
    </div>

Images in the snippet replaced for representation.

Solution

I guess you should review your CSS basics... You can simply use:

#boxes_1 {
    margin-top: 0;
}

The ID will override the class, or:

#boxes_1.boxess {
    margin-top: 0;
}

Or even:

.boxess:first-child {
    margin-top: 0;
}

Or even:

.boxes > .boxess {
    margin-top: 0;
}