Scaling an image with flexbox

I’m working on the company home page project, one of the challenge projects: https://www.codecademy.com/practice/projects/company-page-with-flexbox

I’ve fallen at the first hurdle with trying to get my logo image scaled in the top left corner of the browser; it’s full sized. This is my HTML:

<!DOCTYPE html>
<html>
<head>
  <title>New Nova Designs</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header -->
  <div class = "header">
    <!-- Logo goes here-->
    <div class ="logo">
      <img src = "logo.jpg" alt = "Logo">
      </div>
    <!-- Navigation-->
      <nav>
        <p class ="main-menu">
          <a href="#mission">Mission</a>
          <a href="#services">Our Services</a>
          <a href="#team">Meet The Team</a>
          </p>
        </nav>
      </div>
<!-- Mission -->
<div class ="mission">
  <h2>Our Mission</h2>
  <h4>We bring together the highest calibre of graphic and website designers, as well as web developers, to provide our clients with an all-inclusive, industry-leading service.</h4>
  </div>

  <!-- Our Services -->
  <div class ="services-text">
    <h2>Our Award-Winning Services</h2>
    <div class ="gallery-services">
      <figure>
        <img>
        <figcaption>Graphic Design</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Web Design</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Web Development</figcaption>
        </figure>
      </div>
    </div>

<div class = "team-text">
  <h2>Our Dedicated Team</h2>
  <div class = "gallery-team">
      <figure>
        <img>
        <figcaption>Carrie Bradshaw, CEO</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Miranda Hobbes, CFO</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Charlotte Goldenblatt, Director</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Samantha Jones, Marketing & Client Relations</figcaption>
        </figure>
      </div>

</body>
</html>

This is my CSS:

* {
    box-sizing: border-box;
    color: black;
}

.header {
  display: inline-flex;
  width: 1300px;
  height: 200px;
  justify-content: flex-start;
  z-index: 1;
  
}

.logo {
   
    max-height: 150px;
    max-width: 250px;
    width: 25%;
    height: auto;

}


.main-menu {
 text-align: right;
 z-index: 2;
}


Nevermind, I got this working by making the image instead a background image of a div element, like so:

<!DOCTYPE html>
<html>
<head>
  <title>New Nova Designs</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
  <!-- Header -->
  <div class = "header">
    <!-- Logo goes here-->
    <div class ="logo">
      </div>
    <!-- Navigation-->
      <nav>
        <p class ="main-menu">
          <a href="#mission">Mission</a>
          <a href="#services">Our Services</a>
          <a href="#team">Meet The Team</a>
          </p>
        </nav>
      </div>
<!-- Mission -->
<div class ="mission"><a name='mission'>
  <h2>Our Mission</h2>
  <h4>We bring together the highest calibre of graphic and website designers, as well as web developers, to provide our clients with an all-inclusive, industry-leading service.</h4>
</a> 
</div>

  <!-- Our Services -->
  <div class ="services"><a name='services'>
    <h2>Our Award-Winning Services</h2>
    <div class ="gallery-services">
      <figure>
        <img>
        <figcaption>Graphic Design</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Web Design</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Web Development</figcaption>
        </figure>
      </div>
      </a>
    </div>

<div class = "team"><a name='team'>
  <h2>Our Dedicated Team</h2>
  <div class = "gallery-team">
      <figure>
        <img>
        <figcaption>Carrie Bradshaw, CEO</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Miranda Hobbes, CFO</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Charlotte Goldenblatt, Director</figcaption>
        </figure>
        <figure>
        <img>
        <figcaption>Samantha Jones, Marketing & Client Relations</figcaption>
        </figure>
        </div>
        </a>
      </div>

</body>
</html>


  • {
    box-sizing: border-box;
    }

.header {
display: inline-flex;
width: 1300px;
height: 200px;
z-index: 1;

}

.logo {
background-image: url(logo.jpg);
background-size: 250px;
width: 250px;
height: 250px;
position: absolute;
top: 5px;
left: 5px;

}

.main-menu {
text-align: right;
z-index: 2;
}

body {
font-family: ‘Montserrat’, Tahoma, sans-serif;
text-align: center;
}

.services-text figcaption {
font-family: ‘Open Sans’, Tahoma, sans-serif;
}

.gallery-team figcaption {
font-family: ‘Open Sans’, Tahoma, sans-serif;
}