estou com problemas em um layout no qual estou estudando e praticando

.eventos__item{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto repeat(2, 1fr) auto;
    grid-template-areas: "imagem imagem"
    "nome nome"
    "data data"
    "local botao";
}

.eventos__item img{
    grid-area: imagem;
}

.eventos__item h3{
    grid-area: nome;
    align-self: center;
}

.eventos__item h4{
    grid-area: data;
}

.eventos__item h5 {
    grid-area: local;
    align-self: flex-end;
}

.eventos__item button {
    grid-area: botao;
}

.eventos__lista {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.eventos__item {
    flex-grow: 1;
    width: 105%;
}

A imagem acima mostra que o primeiro elemento está com botão pra fora do elemento, como eu resolvo isso ? alguem pode me ajudar ?