Hice unos cambios en mi proyecto, y cuando me quise dar cuenta, todo se descolocó. Como no pensé que se iba a liar tanto, no hice copia, y bueno, intento cambiar cosas y nada funciona.

Ahora mismo está así el código:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    ::-moz-selection { /* Code for Firefox */
      color: white;
      background: #8d33ff;;
    }

    ::selection {
      color: white;
      background: #8d33ff;;
    }

    body {
    	font-family: Verdana;
    	background-image: url("https://image.flaticon.com/icons/png/128/1206/1206290.png");
    	width: 100%;
    	background-size: 100px 80px;
    }

    /* Redimensión */

    * {
    	box-sizing: border-box;
    }
    #menu {
    	float:left;
    	width:100%;
    	text-align:center;
    }
    #menu a {
    	background-color: none;
    	padding:10px;
    	margin-top:0px;
    	display:block;
    	text-align: center;
    	width:100%;
    	color:white;
    }

    #portada {
    	float:left;
    	width:100%;
    	padding:0 20px;
    }
    #lateral {
    	background-color:none;
    	float:left;
    	width:100%;
    	padding:15px;
    	margin-top:7px;
    	text-align:center;
    }

    #contenido2 {
    	background-color:none;
    	float:left;
    	width:100%;
    	padding:15px;
    	margin-top:7px;
    	text-align:center;
    }

    /* Estructura flex */

    .flex-container {
      display: flex;
      align-items: stretch;
      background-color: none;
    }

    .flex-container > div {
      background-color: none;
      color: black;
      width: 100px;
      margin: 5px;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
    }

    /* Nav bar */

    .navbar {
      width: 100%;
      background-color: #555;
      overflow: auto;
    }

    .navbar a {
      float: left;
      padding: 12px;
      color: white;
      text-decoration: none;
      font-size: 17px;
    }

    .navbar a:hover {
      background-color: #000;
    }

    .active {
      background-color: #4CAF50;
    }

    @media screen and (max-width: 500px) {
      .navbar a {
        float: none;
        display: block;
      }
    }

    /* Galería */

    img {
      max-width: 100%;
      height: auto;
    }

    div.img {
      border: 1px solid #ccc;
      background-color: white;
      overflow: hidden;
    }

    div.img:hover {
        border: 1px solid #777;
    }

    div.desc {
      padding: 5px;
      text-align: center;
      font-size: 12px;
    }

    .responsive {
      padding: 0 6px;
      float: left;
      width: 31%;
    }

    @media only screen and (max-width: 700px) {
      .responsive {
        width: 30%;
        margin: 6px 0;
      }
    }

    @media only screen and (max-width: 500px) {
      .responsive {
        width: 100%;
      }
    }

    /* Dropdown */

    .dropdown {
      float: left;
      overflow: hidden;
      color: black;
    }

    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
       overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    #myInput {
      box-sizing: border-box;
      font-size: 16px;
      padding: 14px 20px 12px 45px;
      border: none;
      border-bottom: 1px solid #ddd;
    }

    #myInput:focus {outline: 3px solid #ddd;}

    .show {display: block;}

    /* Otros */

    .lateral {
    	background-color: FloralWhite;
    }

    p {
        background: rgba(236, 223, 255, 0.5);
    }

    a {
        display: flex;
        align-items: center;
    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    </head>
    <body>

    <div class="flex-container" id="portada">
      <div style="flex-grow: 10">
    		<img src="https://image.freepik.com/vector-gratis/fondo-banner-gatos-lindos-dicen-hola_45130-353.jpg"
    		width="100%" height="300px;">
      </div>
    </div>
    <!-- class="active" -->

    <div class="navbar" id="menu">
      <a class="active" href="./index.php">
          <i class="material-icons" style="font-size:24px; color: white">home</i>Inicio</a>
          
      <a href="">Gato1</a>
          
      <a href="">Gato2</a>
          
      <a href="">Gato3</a>
         
          <div class="dropdown" style="float: right;">
        <button onclick="myFunction()" class="dropbtn">Buscar 
          <i class="material-icons" style="font-size:24px; color: white; vertical-align:middle">search</i>
        </button>
        <div id="myDropdown" class="dropdown-content">
          <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
                <a href="#gato1">Gato1</a>
                <a href="#gato2">Gato2</a>
                <a href="#gato3">Gato3</a>
                <a href="#gato4">Gato4</a>
                <a href="#gato5">Gato5</a>
                <a href="#gato6">Gato6</a>
                <a href="#gato7">Gato7</a>
        </div>
        
      </div> 
    </div>

    <div class="flex-container" id="lateral">	
    	<div style="flex-grow: 1">
    	    	
    	<p>Somos unos gatos adorables de prueba :D</p>
                
        </div>
      
      </div>	
        
    	<div style="flex-grow: 9"> 

        <div class="responsive">
    		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
    		<div class="desc">Hola soy otro gato</div>
    	</div>

    	   	<div class="responsive">
    		<a href="gato2.jpg">
    		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
        </a>
    		<div class="desc">Hola soy otro gato</div>
    	</div>
      </div>

    	<div class="responsive">
    		<a href="gato3.jpg">
    		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
        </a>
    		<div class="desc">Y otro gato</div>
    	</div>
    	
    	<div class="responsive">
    		<a href="gato3.jpg">
    		<img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
        </a>	
    		<div class="desc">Y otro gato</div>
    	</div>
      
      <div class="responsive">
    		<a href="gato.jpg">
    		<img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
        </a>
    		<div class="desc">Hola soy un gato</div>
    		</div>
    	
    	<div class="responsive">
    		<a href="gato2.jpg">
    		<img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
        </a>
    		<div class="desc">Hola soy otro gato</div>
    	</div>
    </body>

    <script>
    /* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

    function filterFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      div = document.getElementById("myDropdown");
      a = div.getElementsByTagName("a");
      for (i = 0; i < a.length; i++) {
        txtValue = a[i].textContent || a[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          a[i].style.display = "";
        } else {
          a[i].style.display = "none";
        }
      }
    }
    </script>

    </html>

<!-- end snippet -->

No recuerdo ahora más que añadir el `dropdown` del menú, y quizá intentar arreglar el `responsive` de las imágenes.  No sé cuando se puso así de raro todo.

Lo que se ha descolocado:

 - **Menú de navegación**. Ahora está vertical, antes horizontal y no logro cambiarlo.
 - En el **dropdown del menú**, las opciones que hay al desplegar aparecen con color blanco, por mucho que cambio a color negro en el css a la clase, no cambia.
 - El texto que hay debajo de las imágenes tenía un fondo blanco que no sé cuándo desapareció.
 - Las **flexbox** son ignoradas. El proyecto tiene la siguiente estructura, y la ignora completamente.

[![estructura web][1]][1]

Para el primer punto, intenté volver a hacer todo desde el principio. Literalmente copié todo el código que salía bien y lo pegué, modificando lo correspondiente, y aún así seguía en vertical.

Para el segundo punto, añadí al `.dropdown` color negro. Quité el `color: white` que tenía la clase `.dropdown, .dropbtn`, pero nada. Al `.dropdown-content` igual, `color: black` y nada. <br>No sé que se supone que tengo que modificar para cambiar eso.

El tercer punto probablemente haya sido el causante de todo. Me hago un lío intentando que las imágenes sean `responsive` sin conseguir del todo el [punto][2] deseado que se consigue en los [tutoriales][3] que veo, siempre terminan deformándose o saliéndose el texto o cualquier otro problema.


  [1]: https://i.sstatic.net/yS5up.png
  [2]: https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_images_responsive
  [3]: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2