Юлия

Попробуйте посмотреть в сторону transform: skewY.
У родительского дива будет отрицательное значение, у блока с контентом положительное (для выравнивания текста и картинки).

У main абсолютное позиционирование. Но не задано смещение top.
Уберите position: absolute; и будет вам счастье.

Если оно требуется по каким-то причинам, то не забывайте про значения top, right, bottom, и left.

P.S. И justify-content: center; не работает без флекса или грида.

QnaTwitt, если допустимо использовать flex (судя по комментариям), то может быть такое решение.
На мобильных устройствах за счет flex-wrap будет перенос кнопок на новую строку. Если кнопок будет больше 3-х этого все равно не избежать на маленьких экранах.

<div class="flex">
  <button class="btn btn--primary">Log in</button>
  <button class="btn btn--outline">Registration</button>
  <button class="btn btn--outline">Forgot password</button>
  <button class="btn btn--outline">Forgot password</button>
</div>

*{
  box-sizing: border-box;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  border: none;
  background-color: transparent;
  font-family: inherit;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
 
}

.btn--primary {
  color: #fff;
  background-color: #000;
}

.btn--outline {
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}