How can I put these images next to each other?

Question

I'm building a portfolio for websites I've built(for a school project) and I want my images to be vertical on screens smaller than 1100px but make them go next to each other on screens bigger than 1100px. Here's my code

#projects {
  background-color: #7A0000;
  border-bottom: 3px solid black;
  padding: 15px;
}

.project-img {
  width: 325px;
  border: 3px solid black;
  margin: 15px auto;
  display: block;
  transition: 0.3s;
  background-color: #333;
}

.project-img:hover {
  transform: scale(1.03, 1.03);
  transition: 0.3s;
}

@media screen and (min-width: 1100px) {}

<section id="projects">
  <h2 class="subheading">PROJECTS</h2>
  <div id="project-container">
    <a href="procect-1/index.html"><img src="images/project-1.jpg" alt="Terry's Computers" class="project-img"></a>
  </div>
  <div id="project-container">
    <a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
  </div>
  <div id="project-container">
    <a href="#"><img src="images/coming-soon.jpg" alt="Project Coming Soon" class="project-img"></a>
  </div>
</section>

Answer 1

Try Adding this in your css file

@media screen and (max-width: 1100px) {
  .project-img {
    display: block;
  }
}

@media screen and (min-width: 1100px) {
  .project-img {
    width: 1100px;
    display: inline;
  }
}