body {
    background-color: gray;
    margin: 0;
    font-family: 'Open sans', sans-serif;
}

.nav-bar {
    background-color: black;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: center; /* Centra el contenido */  
    width: 100vw;
    position: fixed; /* Deja la barra de navegación pegada en un punto a la pantalla */
    z-index: 2; /* Nos ayuda a solucionar el problema de apilamiento de los contenedores */
}

.nav-bar a {
    background-color: black;
    color: white;    
}

.cartelera {
    position: relative;
    border: 5px solid black;
      height: 450px;
}


.contenedor-movie1 {
    width: 230px;
    height: 300px;
    background-color: red;
    box-sizing: border-box; /* Si añadimos un margin, padding o un border en px, este hará parte del tamaño definido en width y height*/
    position: absolute;
    left: 100px;
    top: 100px;
}

.contenedor-movie1 img {
    width: 180px;
    height: 190px;
    margin: 20px;
}

.contenedor-movie2 {
    width: 230px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 390px;
}

.contenedor-movie2 img {
    width: 180px;
    height: 190px;
    margin: 20px;
}

.contenedor-movie3 {
    width: 230px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 700px;
}

.contenedor-movie3 img {
    width: 180px;
    height: 190px;
    margin: 20px;
}

.contenedor-movie4 {
    width: 230px;
    height: 300px;
    background-color: red;
    position: absolute; /* Nos deja moverlo de su posición con: top, right, bottom y left con respecto a su contenedor (position-relative) sin afectar el margin*/
    top: 100px;
    left: 1000px;
}

.contenedor-movie4 img {
    width: 180px;
    height: 190px;
    margin: 20px;
}