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