Help with preventing overlapping containers in flexbox

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

I’ve tried just about everything and also had a look at the solution code, but I can’t figure out how to prevent the containers from overlapping each other when the browser is minimised (I’m using Google Chrome).

Here is my code:

<!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>
        <div class ="main-menu">
            <ul>
             <li><a href="#mission">Mission</a></li>
             <li><a href="#services">Our Services</a></li>
              <li><a href="#team">Meet The Team</a></li>
              <li><a href="#contact">Get In Touch</a></li>
            </ul>
        </nav>
      </div>
<!-- Mission -->
<div class ="mission"><a name='mission'>
    <h1>New Nova Designs</h1>
    <br>
    <br>
  <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>
<br>
<br>
  <!-- Our Services -->
  <div class ="services"><a name='services'>
    <h2>Our Award-Winning Services</h2>
    <div class ="gallery-services">

      <figure class="photo">
        <img src="graphic-design.jpg">
        <figcaption>Graphic Design</figcaption>
        </figure>

        <figure class="photo">
        <img src="web-design.jpg">
        <figcaption>Web Design</figcaption>
        </figure>
        <figure class="photo">
        <img src="web-development.jpg">
        <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 src="carrie.jpg">
        <figcaption>Carrie Bradshaw, CEO</figcaption>
        </figure>
        <figure>
        <img src="miranda.jpg">
        <figcaption>Miranda Hobbes, CFO</figcaption>
        </figure>
        <figure>
        <img src="charlotte.jpg" id="director">
        <figcaption>Charlotte Goldenblatt, Director</figcaption>
        </figure>
        <figure>
        <img src="samantha.jpg">
        <figcaption>Samantha Jones, Marketing & Client Relations</figcaption>
        </figure>
        </div>
        </a>
      </div>
      <br>
      <br>
<div class="contact"><a name="contact">
<h2>New Nova Designs</h2>
<h3>contact@newnovadesigns.com</h3>
<h3>555-821-4745</h3>
<br>
<br>
<h3>Copyright New Nova Designs 2020</h3>
</a>
</div>
</body>
</html>
* {
    box-sizing: border-box;
}

.header {
  display: inline-flex;
  flex-shrink: 0;
  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;
    border: 2px solid;

}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 5px;
}

.main-menu {
    display: inline-block;
    padding: 20px;
    
}


body {
    font-family: 'Montserrat', Tahoma, sans-serif;
    text-align: center;
    position: relative;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mission {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.services {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.team {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.gallery-services {
    width: 100%;
    height: 400px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex: 1 0 auto;
    align-items: center;

}

.services img {
    width: 300px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    flex: 1 0 auto;
    
}

.gallery-team {
    width: 100%;
    height: 400px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    flex: 1 0 auto;
    padding-bottom: 20px;
    align-items: center;
    
}

.gallery-team img {
    width: 250px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    flex: 1 0 auto;
}

#director {
    width: 350px;
}

.gallery-services figcaption {
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-weight: bold;
}

.gallery-team figcaption {
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-weight: bold;
}


Hello @ruby9951660504, from just looking through your code, you’ve used static measurements (not sure if that’s the correct word for them), like px. If you used a measurement like em, which are proportional to the size of the size of the browser window, that might help solve your issue. Here is an article explaining rem, em and px. Not to say to follow it to the letter, but it gives a good indication of the relative measurements.
I hope this helps!

Hello again. I just found another website which explains em, rem, and px; it might be less subjective than the first one I mentioned.

Thanks for those two articles. I changed my measurements throughout CSS to rem, however that did not solve the problem. The best solution I’ve come up with is to set the services images to overflow: hidden and the staff images to nowrap, this prevents images from either gallery from overlapping with any other elements.

However I am still curious on how to implement the code in the solution, in which the gallery images shift from a row to column as the browser resizes.

This is the latest version of my code:

<!DOCTYPE html>
<html>
<head>
  <title>New Nova Designs</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <!-- Header -->
  <div class = "header">
    <!-- Logo goes here-->
    <div class ="logo">
      </div>
    <!-- Navigation-->
      <nav>
        <div class ="main-menu">
            <ul>
             <li><a href="#mission">Mission</a></li>
             <li><a href="#services">Our Services</a></li>
              <li><a href="#team">Meet The Team</a></li>
              <li><a href="#contact">Get In Touch</a></li>
            </ul>
        </nav>
      </div>

      <!-- Mission -->
<main>
<div class ="mission"><a name='mission'>
    <h1>New Nova Designs</h1>
    <br>
    <br>
  <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>
<br>
<br>
  <!-- Our Services -->
  <div class ="images-container">
  <div class ="services"><a name='services'>
    <h2>Our Award-Winning Services</h2>
    <div class ="gallery-services">

      <figure class="photo">
        <img src="graphic-design.jpg">
        <figcaption>Graphic Design</figcaption>
        </figure>

        <figure class="photo">
        <img src="web-design.jpg">
        <figcaption>Web Design</figcaption>
        </figure>
        <figure class="photo">
        <img src="web-development.jpg">
        <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 src="carrie.jpg">
        <figcaption>Carrie Bradshaw, CEO</figcaption>
        </figure>
        <figure>
        <img src="miranda.jpg">
        <figcaption>Miranda Hobbes, CFO</figcaption>
        </figure>
        <figure>
        <img src="charlotte.jpg" id="director">
        <figcaption>Charlotte Goldenblatt, Director</figcaption>
        </figure>
        <figure>
        <img src="samantha.jpg">
        <figcaption>Samantha Jones, Marketing & Client Relations</figcaption>
        </figure>
        </div>
        </a>
      </div>
      </div>
      <br>
      <br>

<footer>
<div class="contact"><a name="contact">
<h2>New Nova Designs</h2>
<h3>contact@newnovadesigns.com</h3>
<h3>555-821-4745</h3>
<br>
<br>
<h3>Copyright New Nova Designs 2020</h3>
</a>
</div>
</footer>
</main>
</body>
</html>
* {
    box-sizing: border-box;
    font-size: 62.5%;
}

.header {
  display: inline-flex;
  flex-shrink: 0;
  width: 24rem;
  height: 18rem;
  font-size: 15rem;
  z-index: 1;
  
}

.logo {
    background-image: url(logo.jpg);
    background-size: 12rem;
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: .5rem;
    left: .5rem;
    border: .2rem solid;

}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: .5rem;
}

.main-menu {
    display: inline-block;
    padding: 2rem;
    
}

h1 {
    font-size: 3rem;
    font-weight: 600;
}

h2 {
    font-size: 2rem; 
    font-weight: 600;
}

h3, h4 {
    font-size: 1.5rem;
    font-weight: 400;
}

figcaption {
    font-size: 1.25rem;
    font-weight: 400;
}


body {
    font-family: 'Montserrat', Tahoma, sans-serif;
    text-align: center;
    position: relative;
    font-weight: 400;
    background-image: url('background_image.jpg')
}


.services {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50rem;
}

.team {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50rem;
}


.gallery-services {
    width: 100%;
    height: 40rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    flex: 1 0 auto;
    align-items: center;
    overflow: hidden;

}

.services img {
    width: 30rem;
    height: 30rem;
    margin-left: auto;
    margin-right: auto;
    flex: 1 0 auto;
    
}

.gallery-team {
    width: 100%;
    height: 50rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    flex: 1 0 auto;
    padding-bottom: 4rem;
    align-items: center;
    overflow: hidden;
    
}

.gallery-team img {
    width: 30rem;
    height: 32rem;
    margin-left: auto;
    margin-right: auto;
    flex: 1 0 auto;
}

#director {
    width: 36rem;
}

.gallery-services figcaption {
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-weight: 600;
}

.gallery-team figcaption {
    font-family: 'Open Sans', Tahoma, sans-serif;
    font-weight: 600;
}

footer, h3 {
    font-weight: 600;
}

Hello @ruby9951660504. I may be mistaken, but is some of the solution code using media queries? If so, then they allow you to re-write some CSS code, if the screen size is lowered:

@media only screen and (max-width:/*certain width*/){
/*re-written code goes here*/
}

I hope this helps!

Hi @codeneutrino, the solution code does not use media queries, it only uses flexbox.

I also tried making another website, and implementing line for line the same HTML and CSS rules as the solution. This did make it so the first set of gallery images (food) did not overlap with the second gallery images (team), but the team images stayed in a column even when the screen was wide enough to allow them to spread out in a row. Unlike in the solution code where they go from being a row to a column as the browser resizes.

Here is my second website:

<!DOCTYPE html>
<head>
    <title>Salvation in Noodles</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,300;1,100&display=swap" rel="stylesheet">
</head>

<body>
    <div class="header">
        <h1>Salvation in Noodles</h1>
        <div class="navbar">
            <p>
                <a href="#about-us">About Us</a>
            </p>
            <p>
                <a href="#specialities">Specialities</a>
            </p>
            <p>
                <a href="#team">Meet The Team</a>
            </p>
        </div>
    </div>

    <div class="main">
        <div class="about-us">
            <div class="content">
                <a href="#about-us"><h2>Salvation in Noodles</h2></a>
                <h4>Our kitchen cooks up the most authentic Vietnamese food in all of London.</h4>
            </div>
        </div>
        <div id="specialities">
            <div class="content">
                <a href="#specialities"><h2>Our Specialities</h2></a>
                <h4>"Some of the best Vietnamese this side of Saigon" - The Guardian</h4>
                <div class="foods">
                <div class="food">
                    <img src="pho.jpg">
                    <span>Pho</span>
                </div>
                <div class="food">
                    <img src="banh-mi.jpg">
                    <span>Banh Mi</span>
                </div>
                <div class="food">
                    <img src="summer-rolls.jpg">
                    <span>Summer Rolls</span>
                </div>
                <div class="food">
                    <img src="banh-xeo.jpg">
                    <span>Banh Xeo</span>
                </div>
                <div class="food">
                    <img src="coffee.jpg">
                    <span>Vietnamese Coffee</span>
                </div>
                </div>
            </div>
        </div>

        <div id="team-container">
            <a href="#team"><h2>Our Team</h2></a>
            <div class="team">
                <div class="teammate">
                    <img src="chef.jpg">
                    <h3>Nam Tran</h3>
                    <p>Head Chef</p>
                </div>
                <div class="teammate">
                    <img src="sous-chef.jpg">
                    <h3>Lisa Robbins</h3>
                    <p>Sous Chef</p>
                </div>
                <div class="teammate">
                    <img src="manager.jpg">
                    <h3>John Ho</h3>
                    <p>Manager</p>
                </div>
            </div>
        </div>
    
        <div class="contact-container">
        <div class="contact">
            <h2>Salvation in Noodles</h2>
            <h5>hi@salvationinnoodles.com</h5>
            <h5>555-978-1234</h5>
        </div>
        <div class="copyright">
            <h5>Copyright Salvation in Noodles 2020</h5>
        </div>
    </div>
    </div>
</body>
</html>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Kanit, sans-serif;
    font-weight: 100;
    color: black;
    font-size: 22px;
    text-align: center;
}

a {
    color: black;
}

h2,
h3,
h4,
p {
    margin: 0;
    padding: 10px;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar {
    display: flex;
    justify-content: space-around;
    margin: 0 10%;
}

.navbar p {
    display: inline-block;
    padding: 10px 10px;
}

.main {
    padding-top: 35px;
    opacity: 0.9;
}

.about-us {
    display: flex;
    height: 300px;
    background-image: url("noodles.jpg");
    background-size: cover;
    padding-top: 35px;
}

.about-us .content {
    margin: auto;
    background-color: white;
    width: 100%;
}

#specialities {
    min-height: 500px;
    margin: auto;
    padding-top: 70px;
}

.foods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.food {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.food img {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    padding: 10px;
    height: auto;
}

.food span {
    padding: 5px;
    min-width: 240px;
    font-weight: bold;
    text-align: center;
}

team {
    padding-top: 70px;
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.teammate {
    padding: 10px;
    flex-basis: 280px;
}

.teammate img {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: auto;
}

.contact,
.copyright {
    padding-top: 20px;
}

.contact-container {
    background-image: url("vietnam.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.9;
}

For your reference, here is the link to the solution code: Company Home Page Challenge Project (Css,Flexbox)

Hello @ruby9951660504, I’m sorry, there’s not much more that I can think of. The only thing that comes to mind is that they are using margin: auto instead of margin: 0, but I doubt that that is the reason. @irlfede, do you have any insights?
Sorry I couldn’t be of more help!