Flexbox won't change directions

Flexbox won't change directions

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.

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;



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

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.

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

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