My images are stacking one over the other (CSS) and taking more space outside the designed website-CodePudding

My content images are stacking over one another, and I have set max width yet they take up more space than the desired. My other image under the heading is also taking up more space than the website designed. I tried deleting the .image selector in css but nothing changed.

* {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a {
    font-size: 16px;
    text-decoration: none;
    color: #e5e7eb;
}

li {
    list-style-type: none;
    margin: 8px;
}

ul {
    display: flex;
    flex-direction: row;
}

.header {
    background-color: #1f2937;
    margin: 0;
    padding: 0;
}

.header2 {
    display: flex;
    justify-content: space-around;
}

.heromain {
    font-weight: bolder;
    font-size: 48px;
    color: #f9faf8;
}

.herotwo {
    font-size: 18px;
    color: #e5e7eb;
}

.section-left {
    display: flex;
    flex-direction: column;
}
.logo {
    font-size: 24px;
    color: #f9faf8;
    font-weight: bold;
    padding-top: 10px;
}

.content {
   font-size: 36px;
   font-weight: bolder;
   color: #1F2937; 
   text-align: center;
}

.quote {
    background-color: #e5e7eb;
    font-size: 36px;
    font-style: italic;
    color: #1f2937;
    padding: 100px 300px;
}

.action, button {
    background-color: #3882f6;
    color: white;
}

.action {
    width: 650px;
    height: 80px;
    margin: 0 auto;
    border-radius: 15px;
    padding: 30px 100px;
}

button {
    border-radius: 5px;
    border: 2px solid white;
    padding: 4px 17px;
    width: 50px;
    margin: 10px;
    display: inline;
}

footer {
    background-color: #1F2937;
    color: #e5e7eb;
    text-align: center;
    padding: 30px;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.container {
    display: flex;
    justify-content: space-around;
    padding: 100px;
}

.info {
    border-radius: 15px;
    border-color: #3882f6;
    border-width: 4px;
    max-width: 200px;
}

.information {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.text {
    text-align: center;
}

.image {
    max-width: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <div >
          <div >Header Logo</div>
          <ul>
              <li><a href="https://www.google.com" target="_blank" rel="noreferrer noopener">header link one</a></li>
              <li><a href="https://www.twitter.com" target="_blank" rel="noreferrer noopener">header link two</a></li>
              <li><a href="https://www.pinterest.com" target="_blank" rel="noreferrer noopener">header link three</a></li>
          </ul>
        </div>
        <div >
          <div >
            <div >This website is<br>awesome</div>
            <div >This website has some subtext that goes here under the <br>main title. It is a smaller font and colors contrast.</div>
            <button>Sign up</button>
          </div>
          <div >
            <img src="image.png">
          </div>
        </div>
    </div>
    <div >Some random information.</div>
    <div >
        <div >
            <img src="image.png" alt="img">
            <div >this is some subtext under an illustration or image</div>
        </div>
        <div >
            <img src="image.png" alt="img">
            <div >this is some subtext under an illustration or image</div>
        </div>
        <div >
            <img src="image.png" alt="img">
            <div >this is some subtext under an illustration or image</div>
        </div>
        <div >
            <img src="image.png" alt="img">
            <div >this is some subtext under an illustration or image</div>
        </div>  
    </div>
    <div >This is an inspiring quote, or a testimonial from a customer.
        Maybe its just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.
        <div >-Thor, God of Thunder</div>
    </div>
    <div >
        <p><strong>Call to action! It's time!</strong><br>
        Sign up for our product by clicking that button right over there!
        </p>
        <button>Sign up</button>
    </div>
    <footer>Copyright © The Odin Project 2021</footer>
</body>
</html>