Почему этот эффект парения отталкивает другие элементы, которые находятся рядом с ним?

Question

У меня есть div, которые содержат каждую отдельную стрелку (один для текста больше, а другой для текста меньше). Тем не менее, когда я наведу курсор на стрелку «меньше», все остальные элементы немного сдвигаются вправо. Как сделать так, чтобы эффект парения не искал другие элементы?

Это мой HTML:

<div className="datepicker-wrapper">
        <div className="dates">
          <div className="arrows prev-month">&lt;</div>
          <div className="months">
            <div className="start-month">February</div>
            <div className="end-month">March</div>
          </div>

          <div className="days"></div>
          <div className="arrows next-month">&gt;</div>
        </div>

        <div className="selected-dates">
          <div className="check-in-date">02/13/2020</div>
        </div>
      </div>

А это мой CSS:

@import 'variables.css';

.datepicker-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  height: 50px;
  background: transparent;
}

.datepicker-wrapper .dates {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 60%;
  height: 100%;
}

.datepicker-wrapper .selected-dates {
  display: flex;
  flex-direction: column;
  cursor: default;
  width: 40%;
  height: 100%;
}

.datepicker-wrapper .dates .arrows .previous-month {
}

.datepicker-wrapper .dates .arrows:hover {
  width: 15px;
  height: 15px;
  background: var(--light-gray);
  border-radius: 50%;
  cursor: pointer;
}

.datepicker-wrapper .dates .months {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

ПРИМЕЧАНИЕ Я пробовал давая arrows prev-month div заданную ширину, но это, похоже, не имеет никакого эффекта.

Answer 1

Вы даете width и height только при наведении. В любом случае попробуйте присвоить стили стрелкам, а при наведении измените только background-color

.datepicker-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  height: 50px;
  background: transparent;
}

.datepicker-wrapper .dates {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 60%;
  height: 100%;
}

.datepicker-wrapper .selected-dates {
  display: flex;
  flex-direction: column;
  cursor: default;
  width: 40%;
  height: 100%;
}

.datepicker-wrapper .dates .arrows {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.datepicker-wrapper .dates .arrows:hover {
  background: #c1c1c1;
}

.datepicker-wrapper .dates .months {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

<div class="datepicker-wrapper">
        <div class="dates">
          <div class="arrows prev-month">&lt;</div>
          <div class="months">
            <div class="start-month">February</div>
            <div class="end-month">March</div>
          </div>

          <div class="days"></div>
          <div class="arrows next-month">&gt;</div>
        </div>

        <div class="selected-dates">
          <div class="check-in-date">02/13/2020</div>
        </div>
      </div>

Answer 2

Установка стилей для :hover воздействий CSS блочной модели для элемента .arrows:

Все четыре из этих воздействий общее пространство, занимаемое элементом.