Поместите прямоугольник с правой стороны контейнера

Question

Как разместить прямоугольник (именуемый right1) с правой стороны экрана? Я хочу, чтобы оно обрезалось, но оно как-то переполняется.

Я также пытался присвоить overflow: hidden overlayContainer, но каким-то образом оно продолжает переполняться.

<div className={styles.overlayContainer}>
  <Diamond styleName={styles.left1} />
  <Diamond styleName={styles.left2} />
  <Diamond styleName={styles.right1} />
</div>

Стили для right1:

height: 36px
width: 36px
top: 200px
right: -24px

Компонент Diamond - это просто div с этими двумя стилями

.diamond
  position: absolute
  transform: rotate(45deg)

РЕДАКТИРОВАТЬ Я хочу расположить элемент следующим образом.

Answer 1

Я бы предложил две основные вещи.

1. Убедитесь, что элемент body имеет max-width: 100vw;
2. Убедитесь, что элемент body имеет overflow-x: hidden;

Возможно, вы все еще хотите прокрутить по оси Y (вверх / вниз).

Codepen

<div class="diamond" />

html, body {
  max-width: 100vw;
}

body {
  background: black;
  padding: 0;
  margin: 0;
  position: relative;
  overflow-x: hidden;
}

.diamond {
  background: gold;
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
  transform-origin: top center;
  position: absolute;
  right: 0;
}

Answer 2

Я думаю, что проблема вызвана из-за этого css

right: -24px;

right:0;

, если это не исправляет, пожалуйста, напишите ваш код.