title: Same images, same container but different sizes
body: <p>I have the same images set up within a container. I have set up a width (it´s suppose that this has to apply both of them) but in the end the right one looks bigger BUT this happens when it gets to the @media (min-width:1024px). I believe this is related with responsive. While we have the images under that size and in display: block is OK. When it turns display:flex the problem begins. Please anybody help me with this issue. It doesn´t has any sense. (evidence attached)</p>
  <p>HTML code</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;es&quot;&gt;
  &lt;head&gt;
  &lt;title&gt;Balance-Salud Mental&lt;/title&gt;
  &lt;meta charset=&quot;UTF-8&quot;/&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;, user-scalable=no, initial-scale=1, maximun- 
  scale=1, minimun-scale=1&quot;/&gt;
  &lt;meta name=&quot;description&quot; content=&quot;Tu salud mental es importante, cuidala con los profesiones 
  adecuados. &quot;/&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.js&quot;&gt;&lt;/script&gt;
      
  &lt;link rel=&quot;icon&quot; href=&quot;img/favicon.png&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/fontello.css&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/index.css&quot;&gt;
  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300&amp;display=swap&quot; 
  rel=&quot;stylesheet&quot;/&gt;
  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&amp;display=swap&quot; 
  rel=&quot;stylesheet&quot;/&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;header&gt;
  &lt;div class=&quot;contenedor&quot;&gt;
      &lt;a href=&quot;index.html&quot;&gt;
      &lt;img src=&quot;img/logo.png&quot; class=&quot;brand&quot; alt=&quot;Salud Mental Peru&quot;&gt;
      &lt;/a&gt;
      
          
      &lt;input type=&quot;checkbox&quot; id=&quot;menu-bar&quot;&gt;
      &lt;label class=&quot;icon-menu-outline&quot; for=&quot;menu-bar&quot;&gt;&lt;/label&gt;
  
      &lt;nav class=&quot;menu&quot;&gt;
      &lt;a href=&quot;quienes_somos.html&quot;&gt;¿Quienes Somos?&lt;/a&gt;
      &lt;a href=&quot;nuestros_profesionales.html&quot;&gt;Nuestros Profesionales&lt;/a&gt;
      &lt;a href=&quot;consultas_citas.html&quot;&gt;Consultas y Citas&lt;/a&gt;
      &lt;a href=&quot;blog.html&quot;&gt;Artículos&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/div&gt;            
  &lt;/header&gt;
  
  &lt;main&gt;
  &lt;section id=profesionales&gt;
  &lt;h2&gt;Conócenos&lt;/h2&gt; &lt;br&gt;
      &lt;div class=&quot;contenedor&quot;&gt;
          &lt;div class=&quot;doctor&quot;&gt;
          &lt;h3&gt;Manuel Mallqui Babilon&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti sed distinctio 
             dolore. Veniam dicta error officiis sed. Aut, mollitia.&lt;/p&gt;
          &lt;img src=&quot;img/foto2.jpg&quot; alt=&quot;&quot;/&gt;
          &lt;/div&gt;    
          &lt;div class=&quot;doctor&quot;&gt;
          &lt;h3&gt;Manuel Mallqui Ñamot&lt;/h3&gt;
          &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, vero ex accusamus 
             temporibus maiores esse nihil facilis iusto laudantium aliquid.&lt;/p&gt;
          &lt;img src=&quot;img/foto2.jpg&quot; alt=&quot;&quot;/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;/main&gt;
  &lt;footer&gt;
  &lt;div class=&quot;contenedor&quot;&gt;
  &lt;p&gt;2018-2020 Balance Salud Mental &amp;copy; - Designed by Watermelon&lt;/p&gt;
  &lt;/div&gt;
  &lt;/footer&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS CODE</p>
  <pre><code>@import url(menu.css);
  @import url(slider.css);
  
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  
  body {
  font-family: 'Poppins', sans-serif;
  background-color: #9acd32;
  background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' 
  height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' 
  fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v- 
  42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 
  30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v- 
  18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 
  0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h- 
  2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 
  50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E&quot;);
  }
  
  header {
  
  width: 100%;
  height: 80px;
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  }
  
  .contenedor {
  width: 98%;
  margin: auto;
  }
  
  .brand {
  width: 160px;
  margin: 3px 10px;
  }
  
  section {
  width: 100%;
  margin-bottom: 25px;
  }
  
  /*QUIENES SOMOS*/
  
  #quienes_somos {
  text-align: center;
  margin-top: 100px;
  padding: 20px;
  }
  
  /*NUESTROS PROFESIONALES*/
  
  #profesionales {
  border: 1px solid red;
  text-align: center;
  margin-top: 100px;
  
  }
  
  #profesionales .contenedor {
  border: 1px solid black;
  display: block;
  justify-content: center;
  
  }
  
  .doctor {
  margin: 20px;
  }
  
  .doctor img {
  width: 100%;
  max-width: 500px;
  padding: 10px;
  }
  
  
  /*FOOTER*/
  
  footer .contenedor {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
  font-size: small;
  margin-bottom: 50px;
  margin-top: 250px;
  }
  
  @media (min-width:1024px) {
  
  .contenedor {
      width: 1000px;
  }
  
  #profesionales .contenedor {
      display: flex;
  }
  
  }[enter image description here][1]
  </code></pre>