I am Having A LOT of trouble on the Colmar Academy Capstone Project

Hi! I am having a lot of trouble with the colmar academy capstone project. The content of the banner section is not aligning next to the image.

Here is my code:

colmar_academy.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>
        <div class="banner-content">
          <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>
      </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>

styles.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:hover {
    text-decoration: underline;
}

/* Banner Section */

#banner {
    display: inline-flex;
    background-color: lightgray;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}

#banner .banner-content {
    display: inline-flex;
    flex-direction: column;
    width: 25%;
    margin: 24px 0;
}



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


/* 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%;
}

never mind I started my project over