Hola, trate de replicar una de las cards de la clase pero tengo dos problemas. <ol> <li>Tengo un espacio en blanco arriba de la imagen qu...

Hola, trate de replicar una de las cards de la clase pero tengo dos problemas.

1. Tengo un espacio en blanco arriba de la imagen que no puedo cubrir con la misma imagen

y 2. ¿Como puedo distribuir los botones al final en el footer?

![](

<div class="container">
        <img class="header" src="https://media.istockphoto.com/photos/futuristic-office-picture-id1187179171?b=1&k=20&m=1187179171&s=170667a&w=0&h=4utIg-YgJP2aJIFWHkdeemBDguO6XJwjSImh9sKxmbI=" alt="">
        <img class="center" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
        <h1>Hola Mundo</h1>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <footer>
            <button>Estrategia de negocios</button>
            <button>UX</button>
            <button>Ilustracion</button>
        </footer>
    </div>

body {
    background-color: #ddd;
}
.container {
    background-color: #fff;
    border-radius: 10px;
    width: 400px;
    height: 600px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    justify-content: space-evenly;
    place-items: center;
}
.header {
    background-color: aqua;
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    width: 400px;
    object-fit: cover;
    margin: 0;
    padding: 0;
}
.center {
    width: 140px;
    height: 140px;
    object-fit: cover;
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    border-radius: 50%;
}
h1 {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
    align-self: start;
    margin: 0;
}
p {
    grid-column: 1 / 5;
    grid-row: 4 / 5;
    align-self: end;
    margin: 0 0 25px;
}
footer {
    grid-column: 1 / 5;
    grid-row: 5 / 6;
}