So here is the link to my project repository https://github.com/iamlovingawareness/EdgeLedger/tree/main

In the following code snippet I am not able to implement this change:

1. in the solutions and cases section when the max-width is 768px it should stack one on top of the other but when I make the necessary changes in my styles.css file it shows as an error.

This is what I implemented as follows:

@media (max-width: 768px) {
 .navbar {
   flex-direction: column;
   height: 120px;
   padding: 20px;
 }

 .navbar a {
   padding: 10px 10px;
   margin: 0 3px;
 }

 .flex-items {
   flex-direction: column;
 }

 .flex-columns .column,
 .flex-grid .column {
   flex-direction: column;
   flex: 100%;
   max-width: 100%;
 }

 .team img {
   width: 70%;
 }
}

Supporting HTML snippet

<section class="solutions flex-columns">
        <div class="row">
          <div class="column">
            <div class="column-1">
              <img src="./image_resources/home/people.jpg" alt="" />
            </div>
          </div>
          <div class="column">
            <div class="column-2 bg-primary">
              <h4>What you are loooking for</h4>
              <h2>We provide bespoke solutions</h2>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Est,
                aut!
              </p>
              <a href="#" class="btn btn-outline"
                ><i class="fas fa-chevron-right"></i> Read More</a
              >
            </div>
          </div>
        </div>
      </section>

Where .flex-columns . columns is what is supposed to do the thing but is not.

Kindly help me out thank you

Update: Went to chrome dev tools to see what was going on and saw this in the element property section:

Here as you can see there is a slash on the property that is supposed to be acting when the max-width is 768px. My question now is how do I find out where it has been overridden and make the necessary changes. Thanks !