Flexbox @media - not switching to columns

HTML-CSS
1

After putting in a stupid amount of hours trying to resolve this, I have to ask for help.

I’m working on my 1st project and cannot get flexbox to move from row to column using the @media queary when transition to smaller devices. (codes below)

I’ve tried different ittirations. I’ve stripped my style page of everything but the bare bones, copied “youtube” videos verbatim, checked to make sure that I’m using updated chrome, put the queary above and below the code… I tried wraping the flex on anything over 768px, tried wrapping it with a max of 425px with a display-position: column… I really should move on because spinning my wheels in this fashion is keeping me from moving forward but now it’s personal and I’m starting to obsess about it a bit.

.container{
  max-width: 1400px;
}

.box{
  flex: 2;
  background-color: blue;
}

.img{
  flex: 1;
  background-color: red;
}

@media (min-width: 768px){
  .container{
  display: flex;
}
}
</section>
  <main>
    <section id="content1">
      <div class="container">

        <div class="box">1</div>
        <div class="img">2</div>

      </div>
3

You have tried it with “flex-direction: column;” ?

4

Try putting this tag in your head section:
<meta name="viewport" content="width=device-width, initial-scale=1">

5

correct. problem I believe is with my inspect page. I get the boxes to flex when i shrink web page, but pages behave different on my “inspect” screen.

also, i can only get min 768px to perform, if i put 425px, boxes behave all crazy, and I can’t seem to max anything and get a response… for whatever reason.

of course, this is my 1st go, so I’m sure I’m doing things wrong, just gonna keep plugging away. thanks for response.