Left column div content spilling into right div when zooming in

I've started working on a personal website, a throwback to old armchair movie reviewing sites of the past. For the design, I want to create a layout with a column on the left for screenshots and funny captions, a column on the right for the main content, and a navbar at the top.

So far, everything looks almost like I want it to. The only problem is that when I use the browser's zoom-in, the pictures spill over into the "main content" div. I want everything to stay in the same place in case someone needs to zoom in for better reading.

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    margin: 0;
}

header {
    background: #0073e6;
    color: white;
    text-align: center;
    padding: 1em;
}

.container {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 20%;
    background: #f4f4f4;
    padding: 1em;
    border-width: 1px;
border-style: solid;
font-size: 14px;
font-family: Helvetica;
}

.main-content {
    flex: 1;
    padding: 1em;
    border-width: 1px;
border-style: solid;
font-size: 19px;
font-family: arial;

}

.navbar ul{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #808080;
    padding: 0px;
    margin: 0px;
    width: 400px;
    border: 1px solid;

    overflow: hidden;
    }
    
.navbar a{
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    display: block;
    text-align: center;
}

.navbar last-child a{
    border-bottom: none;

}

.navbar a:hover{
    background-color: purple;
    color: white;
    
    }
    
.navbar li{
    float: left;
    
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title will go here</title>
  <link rel="stylesheet" type="text/css" href="allthings.css">
</head>
<body>

    <header>

        <nav class="navbar">
            <h1>Old Man P's Place</h1>
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="anime.html">Anime</a></li>
            <li><a href="movies.html">Movies</a></li>
            <li><a href="videogames.html">Video Games</a></li>
            </ul>
            </nav>

    </header>

    <div class="container">
        <div class="sidebar">
            <p>Content here.
            </p>
        </div>
        <div class="main-content">
            <p>
          (Words here.)
                </p>
        </div>
    </div>
    </body>
    </html>

body {
  font-family: sans-serif;
  margin: 0;
}

header {
  background: #0073e6;
  color: white;
  text-align: center;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;

  h1 {
    margin: 0;
  }

  nav {
    display: flex;
    background-color: #808080;
    border: 1px solid;
    
    a {
      color: inherit;
      text-decoration: none;
      padding: 8px 16px;
      cursor: pointer;
    }
    
    a:hover {
      background-color: purple;
    }
  }
}

main {
  display: flex;
}

sidebar {
  width: 20%;
  background: #f4f4f4;
  padding: 1em;
  font-size: 14px;

  img {
    width: 100%;
  }
}


.main-content {
  flex: 1;
  padding: 1em;
  font-size: 19px;
  
  > :first-child {
    margin-top: 0;
  }

  > :last-child {
    margin-bottom: 0;
  }
}

<header>
  <h1>Old Man P’s Place</h1>
  <nav>
    <a>Home</a>
    <a>Anime</a>
    <a>Movies</a>
    <a>Video Games</a>
  </nav>
</header>

<main>
  <sidebar>
    <img src="https://picsum.photos/480">
    <img src="https://picsum.photos/490">
    <img src="https://picsum.photos/500">
  </sidebar>
  <div class="main-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
    <p>Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</main>

Left column div content spilling into right div when zooming in

Answer

Enjoyed this article?