Having trouble with the Colmar Academy Capstone project

Hey everyone, I’ve been working on the Colmar Academy Capstone project (https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/learn-how-to-build-websites-capstone-project/modules/colmar-academy/projects/colmar-academy), and I can’t seem to figure out how to fix this.

I have two different containers on my site, and they both have two different sections: left-side and right-side. In the CSS, I specified that left-side’s width is 60% and right-side width is 40%. But when I load the page, the first container’s left-side and right-side width is different than the second container’s left-side and right-side width.

I apologize in advance if my code is a mess, or if there is a really easy fix for this, as I am a complete beginner.

Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Colmar Academy</title>
    <link href="styles.css" type="text/css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">
  </head>

  <body>
    <header>
      <div class="header-back"></div>
      <div class="header">
        <div class="logo">
          <img src="capstone_colmar_assets/images/ic-logo.svg" alt="unable to load Logo">
          <span id="colmar">Colmar</span><span id="academy">Academy</span>
        </div>

        <div class="header-links">
          <nav>
            <a href="#campus">On campus</a>
            <a href="#online">Online</a>
            <a href="#for-companies">For companies</a>
            <a href="#sign-in">Sign in</a>
          </nav>
        </div>
      </div>
    </header>


    <section class="banner">
    
    <!-- This is the first container -->   

      <div class="banner-container">

      <div class="left-side">
        <img src="capstone_colmar_assets/images/banner.jpg" alt="Students studying outdoors">
      </div>

       <div class="right-side">
          <div class="banner-text">
            <h1>Learn something new everyday</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
            <div class="button">
              <a href="#" target="_blank">Start Here</a>
            </div>
          </div>
       </div>  

      </div>
    </section>

    <section class="practice">

 <!-- This is the second container -->

      <div class="practice-container">
        
        <div class="left-side">
          <div class="p-left-side-content">
          <img src="capstone_colmar_assets/images/information-main.jpg" alt="Man reading a book">
          <h2>It doesn't hurt to keep practicing</h2>
          <p>"Curabitur vitae libero in ipsum porttitor consequat. Aliquam et commodo lectus, 
           nec consequate neque. Sed non accumsan urna. Phasellus sed consequat ex. 
           Etiam eget magna laoreet, efficitur dolor consequat, tristique ligula."
          </p>
          <span class="emanuel">Emanuel, Sr Strategist at Hiring.com</span>
        </div>
      </div>

        <div class="right-side">
          <div class="box-one">
            <img src="capstone_colmar_assets/images/information-orientation.jpg">
            <h4>Orientation Date</h4>
          </div>
        </div>


      </div>
    </section>
  </body>
</html>

Here is the CSS:

html {
  font-size: 16px;
}
body {
  margin: 0px;
}

header {
  height: 4rem;
  display: flex;
  justify-content: center;
}

.header-back {
  position: fixed;
  width: 100%;
  height: 64px;
  background-color: white;
  z-index: 9;
}

.header {
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1050px;
  position: fixed;
  z-index: 10;
  background-color: white;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}
.logo {
  display: inline-flex;
  align-items: center;
  margin-left: 24px;
}

.logo img {
  height: 3rem;
  width: auto;
}

.logo span {
  font-size: 18px;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 2rem;
}

#colmar {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #1B202B;
}

#academy {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: #687083;
}

.banner {
  background-color: #d6d6d6;
  width: 100%;
  display: flex;
  justify-content: center;
}

.banner-container {
  background-color: #d6d6d6;
  max-width: 1050px;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.practice {
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: center;
}

.practice-container {
  background-color: white;
  max-width: 1050px;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.left-side {
  width: 60%;
  display: flex;
  padding: 0px 1.25rem;
}

.p-left-side {
  width: 60%;
  padding: 0px 1.25rem;
  display: flex;
}

.p-left-side-content img {
  width: 100%;
}

.header-links {
  display: flex;
  align-items: flex-end;
  padding-right: 0.5rem;
}

.header-links a {
  padding-right: 1rem;
  font-family: 'Ubuntu', sans-serif;
  text-decoration: none;
  color: #4b4b4b;
  transition: color 0s ease;
}

.header-links a:hover {
  color: #656979;
}

.right-side {
  display: flex;
  align-items: center;
  width: 40%;
  padding: 0px 1.25rem;
}

h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: #242424;
  font-size: 2.5rem;
}

h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: #242424;
  font-size: 2.25rem;
}

h3 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: #4b4b4b;
  font-size: 1.25rem;
}

h4 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  color: #4b4b4b;
  font-size: 1.25rem;
}

p {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1rem;
  color: #8b8b8b;
}

.emanuel {
  font-family: 'Ubuntu', sans-serif;
}

.button {

}

.button a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4b4b4b;
  padding: 1rem 0rem;
  font-family: 'Ubuntu', sans-serif;
  text-decoration: none;
  color: white;
  transition: background-color 0.25s ease;
}

.button a:hover {
  background-color: #656979;
}

@media only screen and (max-width: 857px) {
  .left-side {
    width: 100%;
    padding: 0px 0px;
  }
  .banner-container {
    display: block;
  }
  .right-side {
    justify-content: center;
  }
}

Just tested your code and it looks just as you want to have it for me…

left- and right-side are perfectly aligned for both containers.
But I viewed it without any images, so…

Can you maybe post a screenshot of the page or something?

Sure. This is what it looks like to me.

The “Learn something new everyday” image should be the same size as the “It doesn’t hurt to keep practicing” image if the containers were the same size.

I’m also having a problem with the colmar academy capstone project. I can’t get the words under the banner image to align properly.
Here is my code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
<head>
  <!--Head-->
  <title>Colmar Academy</title>
  <link rel="stylesheet" type="text/css" href="./resources/css/reset.css">  
  <link rel="stylesheet" type="text/css" href="./resources/css/styles.css">
</head>


<body>
  
  <!--Header(Desktop)-->


  <header class="computer-header">
    <div class="logo">
      <img src="capstone_colmar_assets/capstone_colmar_assets/images/ic-logo.svg" alt="Colmar logo" />
      <span><strong>COLMAR</strong>ACADEMY</span>
    </div>
    <nav class="computer-nav">
      <span><a href="#">On Campus</a></span>
      <span><a href="#">Online</a></span>
      <span><a href="#">For Companies</a></span>
      <span class="sign-in"><a href="#">Sign In</a></span>
    </nav>
  </header>

  <!--Header(Mobile)-->


  <header class="mobile-header">
    <nav class="mobile-nav">
      <a href="#"><img src="capstone_colmar_assets/capstone_colmar_assets/images/ic-logo.svg" alt="Logo" /></a>
      <a href="#"><img src="capstone_colmar_assets/capstone_colmar_assets/images/ic-on-campus.svg" alt="On Campus" /></a>
      <a href="#"><img src="capstone_colmar_assets/capstone_colmar_assets/images/ic-online.svg" alt="Online/For Companies" /></a>
      <a href="#"><img src="capstone_colmar_assets/capstone_colmar_assets/images/ic-login.svg" alt="Sign In" /></a>
    </nav>
  </header>
    <!--Header End-->
    <!--Main Page Content(Computer)-->
    <!--Banner-->
    <section id="banner">
      <div class="banner">
        <div class="banner-img">
          <img src="capstone_colmar_assets/capstone_colmar_assets/images/banner.jpg" />
        </div>
        <h2>Learn something<br /> new everyday</h2>
        <h3>Loren ipsum dolor sit amet,<br /> consectur adipiscing elit.</h3>
        <button><a href="#" target="_blank">Start Here</a></button>
      </div>
    </section>  
    <!--End of Banner Section-->
   <!--Orientation and Campus lecture section-->
   <section class="orientation-campus">
     <img src="capstone_colmar_assets/capstone_colmar_assets/images/information-main.jpg" />
     <div class="orientation">
       <div class="left">
        <img src="capstone_colmar_assets/capstone_colmar_assets/images/information-orientation.jpg" />
       </div>
       <div class="right">
        <h3>Orientation date</h3>
        <p>Tue 10/11 & Wed 10/12: 8am - 3pm</p>
        <p class="read-more">Read more</p>
       </div>
     </div>
     <div class="campus">
       <div class="left">
        <img src="capstone_colmar_assets/capstone_colmar_assets/images/information-campus.jpg" />
       </div>
       <div class="right">
        <h3>Our Campus</h3>
        <p>Find which campus is close by you</p>
        <p class="read-more">Read more</p>
       </div>
       
       
     </div>
     <div class="guest-lecture">
       <div class="left">
        <img src="capstone_colmar_assets/capstone_colmar_assets/images/information-guest-lecture.jpg" />
       </div>
       <div class="right">
        <h3>Our guest lecture</h3>
        <p>Join a keynote with Oliver Sack<br /> about music in medical treatment</p>
        <p class="read-more">Read more</p>
       </div>
       
     </div>
    <h2>It dosen't hurt to keep practicing</h2>
    <p class="practice">"Curabitur vitae libero in ipsum portittor consequat. Alipum et commodo lectus,<br /> nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam<br /> eget magna laoreet, efficitur dolor consequat, tristique ligula."</p>
    <p class="author">Emanuel, Sr Strategist at Hiring.com</p>

   </section>
   <!--End of first "main" section-->
   <!--Learn Section-->
   <section class="learn">
     <h2>Start Learning</h2>

     <div class="course1">
       <img src="capstone_colmar_assets/capstone_colmar_assets/images/course-software.jpg" />
       <span>Software Engineering</span>
       <p>COURSES</p>
       <p>Web Development, Mobile Development, iOT, APIs</p>
     </div>
     <div class="course2">
       <img src="capstone_colmar_assets/capstone_colmar_assets/images/course-computer-art.jpg" />
       <span>Computer Art</span>
       <p>COURSES</p>
       <p>Imaging & Design, Web Design, Motion Graphics & Visual Effects, Computer Animation</p>
     </div>
     <div class="course3">
      <img src="capstone_colmar_assets/capstone_colmar_assets/images/course-design.jpg" />
      <span>Design</span>
      <p>COURSES</p>
      <p>User experience Design, User Research, Visual Design</p>
     </div>
     <div class="course4">
      <img src="capstone_colmar_assets/capstone_colmar_assets/images/course-data.jpg" />
      <span>Data</span>
      <p>COURSES</p>
      <p>Data Science, Big Data, SQL, Data Visualization</p>
     </div>
     <div class="course5">
      <img src="capstone_colmar_assets/capstone_colmar_assets/images/course-business.jpg" />
      <span>Business</span>
      <p>COURSES</p>
      <p>Product Development, Business Development, Startup</p>
     </div>
     <div class="course6">
      <img src="capstone_colmar_assets/capstone_colmar_assets/images/course-marketing.jpg" />
      <span>Marketing</span>
      <p>COURSES</p>
      <p>Analytics, Content Marketing, Mobile Marketing</p>
     </div>
   </section>
   <!--End of Learn Section-->
   <!--Thesis Exhibit Section-->

   <section class="thesis">
     <h2>Thesis Exhibit</h2>

     <video controls>
       <source src="capstone_colmar_assets/capstone_colmar_assets/videos/thesis.mp4" />
     </video>
     <div class="fisma">
       <img src="capstone_colmar_assets/capstone_colmar_assets/images/thesis-fisma.jpg" />
       <h3>Fisma: Design and Prototype</h3>
       <p>Designer showcase of new prototype product</p>
       
     </div>

     <div class="now-and-then">
       <img src="capstone_colmar_assets/capstone_colmar_assets/images/thesis-now-and-then.jpg" />
       <h3>Now and Then</h3>
       <p>Research study about New York</p>
     </div>
     <h2>Reimagine Urban</h2>
     <p>"Curabitur vitae libero in ipsum portittor consequat. Alipum et commodo lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur dolor consequat, tristique ligula."</p>

   </section>
   <!--End of thesis section-->
   <!--Footer & End of HTML document-->
   <footer>
     <p>&copy; 2020 Colmar Academy. All rights reserved</p>
     <nav>
       <p class="terms">Terms</p>
       <p class="privacy">Privacy</p>
     </nav>
   </footer>
  


</body>
</html>

CSS:


/* Universal Styles */

body {
    font-size: 16px;
    color: gray;
}

button {
    color: darkslategrey;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 40%;
}

/* Header Section */
header {
    height: 2rem;
    display: flex;
    background-color: indianred;
    position: fixed;
    width: 100%;
}

.mobile-header {
    display: none;
}

.logo strong {
    color: black;
}
.logo img {
    height: 2rem;
    width: auto;
}
.logo span {
    font-size: 32px; 
    font-weight: 400;
    height: 3rem;
    width: auto;
}

.logo {
    display: inline-flex;
    align-items: left;
    flex-grow: 1;
    margin-left: 24px;
}

.desktop-header {
    height: 64px;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    border: 1px solid lightcoral;
    background-color: #ffffff;
    width: 100%;
}

.sign-in {
    margin-right: 24px;
}

.desktop-nav a {
    display: flex;
    justify-content: right;
    text-decoration: none;
    font-size: xx-large;
}

.desktop-nav a:active {
    text-decoration: underline;
}

/* Banner Section */

#banner {
    display: flex;
    justify-content: space-between;
    width: 100%;
}



.banner-img {
    width: 60%;
    padding: 32px 24px;
}

#banner h2, #banner h3, #banner p {
    color: darkslategrey;
    display: flex;
    align-items: right;
}

/* Orientation & Campus Lecture Section */

.orientation, .campus, .guest-lecture {
    border: 1px solid lightgray;
    width: 40%;
}

.orientation img, .campus img, .guest-lecture img {
    height: auto;
    width: 35%;
    margin: 16px;
}

.read-more {
    margin-top: 8px;
    color: #0000ff;
}

.orientation p, .campus p, .guest-lecture p {
    margin-top: 8px;
    text-align: right;
}

.orientation-campus h2 {
    font-weight: bold;
}

.practice {
    margin-top: 32px;
    margin-bottom: 24px;
}

.orientation h3, .campus h3, .guest-lecture h3 {
    text-align: right;
}

.byline {
    margin-bottom: 32px;
}

.right {
    width: 65%;
}