Flexbox won't change directions

HTML-CSS
1

I have got the following code with the body set to column, and I am trying to get everything inside the header to change directions to row, but nothing I can find online would work. The only way I can move it to the the right of my company name is by using position absolute which I know will result in bad responsiveness. It seems like a simple thing but just wont budge. Have tried flex-direction: row tried adding flex: 1 and stuff but yeah wont change. This is my current setup.
I like the current start to be column as i find its easiest to keep the footer at the bottom.
CSS

html, body {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
    font-family: 'Roboto Mono', monospace;
  }

header {
     opacity: 0.7;
     flex-direction: row;
 }

  main {
    flex: 1 0 auto;
  }

   footer {
    flex-shrink: 0;
  }

HTML

<header>

  
  <h3>Troydon Fitness</h3>
  <h4>Test</h4>
  
      <div id="mainNav">
          <button class="openbtn" onclick="openNav()">☰ </button>
      </div>
  
</header>
2

If you want to do flexbox stuff inside the header you need to make it a flex container also, like you did with the body.

3

I have tried making header as display: flex; flex-direction: row; too to no avail

4

Works for me. Maybe you have another CSS rule further down in your file that changes header’s display value?

5

Thanks, ended up butting a bootstrap navbar instead and inside all elements flexed as i pleased. I am not sure what CSS i had further down but there was definitely something there that was doing it probs