This is what I am trying to do](https://i.sstatic.net/BWEfG.png)
Hello! Im trying to do a page with different sections, some of them having different colours. My first section and the third one dont have colour but I specified one on the code. This was working after I added some changes so I could navigate with the nav bar.
all code: https://codepen.io/luciajv/pen/Jjmxdpp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Saira Condensed', sans-serif;
font-size: 40px;
}
/* NAVEGADOR */
.header {
background-color: #342647;
display: flex;
justify-content: center;
align-items: center;
height: 85px;
padding: 5px 10%;
}
.header .navegador {
list-style: none;
}
.header .navegador li {
display: inline-block;
padding: 0 20px;
}
.header .navegador li:hover {
transform: scale(1.1);
border-bottom: 5px solid black;
}
.header .navegador a {
font-size: 1000;
color: #000000;
text-decoration: none;
}
/* NOMBRE PELICULA */
.titulo {
background-color: #634b90;
text-align: center;
color: rgb(0, 0, 0);
padding: 50px;
}
h1 {
font-size: 80px;
text-align: center;
justify-content: center;
}
p {
font-size: 30px;
padding: 50px;
letter-spacing: 2px;
}
/*SINOPSIS*/
.sinopsis {
background-color: #6655b3;
}
h2 {
background-color: #6655b3;
font: size 30px;
text-align: center;
justify-content: center;
}
.tabla-con-imagenes {
background-color: #6655b3;
display: grid;
grid-template-columns: 1fr 1fr 2fr;
/* pone 3 columns, la ultima dos veces mas grande que las dos primeras*/
grid-auto-rows: 1fr;
/* todas las rows del mismo tamaño */
gap: 0.5rem;
/* un 0.5 rem de espacio entre todos los elementos */
}
aside {
background-color: #6655b3;
grid-row: span 2;
margin-left: 0.5rem;
font-size: 30px;
}
img {
display: block;
width: 100%;
}
/*GALERIA*/
.galeria {
background-color: #6655b3;
}
h3 {
background-color: #6655b3;
font: size 30px;
text-align: center;
justify-content: center;
}
.columna {
background-color: #6655b3;
float: left;
width: 33%;
padding-right: 5px;
}
.fila::after {
background-color: #6655b3;
content: "";
clear: both;
display: table;
}
/*CRITICAS*/
h4 {
text-align: center;
background-color: #342647;
}
footer a {
width: 64px;
height: 64px;
display: block;
position: static;
position: fixed;
right: 20px;
bottom: 20px;
}<body>
<main id="volver">
<header class="header">
<ul class="navegador">
<li><a href="#sinopsis">Sinopsis</a></li>
<li><a href="#galeria">Galería</a></li>
<li><a href="#criticas">Críticas</a></li>
<li><a href="#elenco">Elenco</a></li>
<li><a href="#casting">Casting</a></li>
</ul>
</header>
<section id="titulo">
<h1>Last Night in Soho</h1>
<p>Película británica de 2021 de terror psicológico dirigida por Edgar Wright, escrita por Wright y Krysty Wilson-Cairns.</p>
</section>
<section id="sinopsis">
<h2>Sinopsis</h2>
<div class='tabla-con-imagenes'>
<div class='image'><img src="imagen1.jpg" alt="Imagen 1" height="400"></div>
<div class='image'><img src="imagen2.jpg" alt="Imagen 2" height="400"></div>
<aside>
Dicen que el pasado es otro país. Un país con las fronteras cerradas. Pero ¿y si no fuera del todo verdad? ¿Qué pasaría si realmente se pudiera entrar en otro tiempo con su torbellino de sensaciones? Esto es exactamente lo que le ocurre a Eloise. La joven
acaba de llegar a la gran metrópoli para seguir con sus estudios de moda, pero está obsesionada con el pasado, desearía haber vivido en un tiempo que ya no existe y haber podido experimentar los años sesenta londinenses en toda su gloria. Sin
embargo, puede que las insólitas dotes psíquicas de Eloise le ofrezcan una oportunidad bastante más literal de lo esperado. Al mudarse a la triste residencia universitaria, se siente intimidada por Jocasta, su brillante compañera de habitación,
y sus descarados amigos. A pesar de los intentos de otro compañero, John, para animarla, Eloise no aguanta las interminables fiestas y alquila una habitación en el último piso de una vieja casa propiedad de Ms. Collins. Y allí, sin adaptarse
del todo, aunque llena de esperanza, Eloise empieza a caer en el sueño de los sesenta. Pero ¿son sus visiones nocturnas meros sueños? Eloise descubre que habita la vida de Sandie, una aspirante a estrella de los sesenta que se abre camino en
el Café de Paris. Sandie canta, baila, actúa, quiere ser famosa y está decidida a que no se la olvide. Sus sueños parecen hacerse realidad cuando conoce al encantador Jack, un agente que podría presentarle a las personas adecuadas para que su
carrera despegue. Eloise la acompaña en una embriagadora aventura en la que se mezclan el primer amor, las luces más brillantes y el mayor sueño.
</aside>
<div class='image'><img src="imagen3.jpg" alt="Imagen 3" height="400"></div>
<div class='image'><img src="imagen4.jpg" alt="Imagen 4" height="400"></div>
</div>
</section>
<section id="galeria">
<h3>Galería</h3>
<div class="fila">
<div class="columna">
<img src="imagen5.jpg">
</div>
<div class="columna">
<img src="imagen6.jpg">
</div>
<div class="columna">
<img src="imagen7.jpg">
</div>
</div>
<div class="fila">
<div class="columna">
<img src="imagen8.jpg">
</div>
<div class="columna">
<img src="imagen9.jpeg">
</div>
<div class="columna">
<img src="imagen10.jpg">
</div>
</div>
</section>
<section id="criticas">
<h4>Críticas</h4>
</section>
</main>
<footer>
<a href="#volver">
<img src="top.png" alt="Flecha para volver hacia arriba">
</a>
</footer>
</body>You have used an ID to change the background colour, but in the css you have used a classname connection. Try changing to #galeria instead.