How to get my list inside the card with responsive size!

Question

I would like to leave the featured content inside the card and not go outside, because when you leave the small screen they end up leaving. I made my site using flexbox as a base.

body {
  background-color: #F2AE2E;
  font-family: Georgia, Times, "Times New Roman", serif
}

body,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-size: 1.2rem;
}

a {
  text-decoration: none;
  color: white;
}

.header {
  color: white;
  background-color: #323E40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  flex-wrap: wrap;
  margin: 0;
}

.header h1 {
  display: inline-block;
  font-size: 30px;
  margin-left: 10px;
  border-bottom: 2px solid white;
}

.menu {
  display: flex;
  margin-right: 20px;
}

.menu li {
  margin-left: 10px;
}

.menu a {
  padding: 10px;
}

.menu a:hover {
  color: black;
  background-color: white;
}

.cl-red {
  color: red;
}

#home {
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/wallpaper_pizza.jpg);
  background-size: cover;
  background-position: center;
  height: 700px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#titulo {
  color: white;
  background-color: rgb(0, 0, 0, 0.4);
  border: 4px solid red;
  border-radius: 5%;
}

#titulo h1 {
  margin: 20px;
  text-align: center;
  font-size: 50px;
}

.break {
  flex-basis: 100%;
  width: 0;
}

#btn {
  margin-top: 20px;
  border: 4px solid #D96704;
  color: white;
  background-color: rgb(0, 0, 0, 0.4);
  text-align: center;
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}

#btn a {
  font-size: 25px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn a:hover {
  background-color: white;
  color: black;
}

#title {
  color: white;
  display: flex;
  background-color: #323E40;
  display: flex;
  font-size: 20px;
  justify-content: center;
}

#produtos img {
  max-width: 100%;
  display: block;
}

#produtos {
  display: flex;
  flex-wrap: wrap;
  max-width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

#produtos div {
  border: 5px ridge #BF2604;
  margin: 10px;
  flex: 1 1 150px;
  color: white;
  background-color: #323E40;
}

#produtos h2 {
  text-align: center;
  margin: 2px;
  color: #D96704;
  padding: 6px;
  border-bottom: 1px solid white;
}

#produtos h3 {
  text-align: center;
  color: #F2AE2E;
  margin-top: 5px;
  margin-bottom: 2px;
}

#produtos ul {
  text-align: center;
}

#produtos li {
  margin-bottom: 4px;
}

#title-contato {
  color: white;
  display: flex;
  font-size: 20px;
  background-color: #D96704;
  align-items: center;
  justify-content: center;
}

#informacoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px;
}

#informacoes div {
  margin: 5px;
  border-bottom: 1px dotted black;
}

#contato {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin: 10px;
  padding: 10px;
}

#contato img {
  width: 60px;
  text-align: center;
}

#contato h1 {
  margin-left: 10px;
  font-size: 30px;
}

#rodape {
  display: flex;
  justify-content: center;
  background-color: #323E40;
  width: 100%;
  color: white;
}

<header class="header">

  <h1>Pizza's <span class="cl-red">Sinai</span></h1>
  <nav>
    <ul class="menu">
      <li><a href="#home">Home</a></li>
      <li><a href="#produtos">Produtos</a></li>
      <li><a href="#contato">Contato</a></li>
    </ul>
  </nav>
</header>
<section id="home">
  <div id="box-central">
    <div id="titulo">
      <h1>Pizzas Delivery pertinho de você!</h1>
    </div>
    <div id="btn">
      <a href="#produtos">Veja Mais</a>
    </div>
  </div>
</section>
<section id="title">
  <h1>Veja os Nossos produtos!</h1>
</section>

<section id="produtos">
  <div>
    <img src="img/pizza_moda.jpg">
    <h2>Pizza a Moda</h2>
    <h3>Igredientes: </h3>
    <ul>
      <li>Apresuntado</li>
      <li>Mussarela</li>
      <li>Bacon</li>
      <li>Calabresa</li>
      <li>Cebola/Pimentao</li>
      <li>Milho e Ervilha</li>
    </ul>
  </div>
  <div>
    <img src="img/pizza_moda.jpg">
    <h2>Pizza de Frango</h2>
    <h3>Igredientes: </h3>
    <ul>
      <li>Mussarela</li>
      <li>Frango</li>
      <li>Catupiry</li>
      <li>Cebola</li>
    </ul>
  </div>
  <div>
    <img src="img/pizza_moda.jpg">
    <h2>Pizza de Calabresa</h2>
    <h3>Igredientes: </h3>
    <ul>
      <li>Mussarela</li>
      <li>Calabresa</li>
      <li>Cebola/Pimentao</li>
    </ul>
  </div>
  <div>
    <img src="img/pizza_moda.jpg">
    <h2>Pizza de Bacon</h2>
    <h3>Igredientes: </h3>
    <ul>
      <li>Mussarela</li>
      <li>Bacon</li>
      <li>Cebola/Pimentao</li>
    </ul>
  </div>
  <div>
    <img src="img/pizza_moda.jpg">
    <h2>Pizza Portuguesa</h2>
    <h3>Igredientes: </h3>
    <ul>
      <li>Apresuntado</li>
      <li>Mussarela</li>
      <li>Calabresa</li>
      <li>Ovo</li>
      <li>Cebola/Pimentao</li>
    </ul>
  </div>
</section>
<section id="informacoes">
  <div>
    <img src="https://www.redelevepizza.com.br/assets/imagens/pizza-grande-35-cm.png">
  </div>
  <div>
    <img src="https://www.redelevepizza.com.br/assets/imagens/pizza-acrescente-mais-sabor.png">
  </div>
  <div>
    <img src="https://www.redelevepizza.com.br/assets/imagens/pizza-experimente-com-refrigerante.png">
  </div>
  <div>
    <img src="https://www.redelevepizza.com.br/assets/imagens/pizza-massa-leve.png">
  </div>
</section>

<section id="title-contato">
  <h1>Entre em Contato</h1>
</section>

<section id="contato">
  <div>
    <img src="img/whatsapp.png">
  </div>
  <div>
    <h1>(XXX)XXXX-XXX</h1>
  </div>
</section>
<section id="novidades">

</section>

<footer id="rodape">
  <div>
    <p> © Pizza's Sinai, todos direitos reservados </p>
  </div>
</footer>

Answer 1

John, to solve this you need to set @media Rules that serve to apply different styles to different devices/media types.

I will leave an example here, but you will have to apply for the site as your need:

body {
  background-color: yellow;
}
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

<body>
  <h1>The @media Rule</h1>

  <p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "yellow".</p>
</body>

To understand how this example works, open it in full screen (whole page), then decrease the width of the screen. When the screen is less than 600px, the background color should change.

To better understand this concept of @media Rules, I suggest you take a look at W3 Schools. Even, this snippet I put here, it was taken from there.