Как сделать так что бы блок с сылками не заходил за секции?

Question

[hooli-gun]

<div class="tabs">
  <a href="#about-1" class="tabs__link">section 1</a>
  <a href="#about-2" class="tabs__link">section 2</a>
  <a href="#about-3" class="tabs__link">section 3</a>
</div>
<section id="about-1" class="page__section wrapper">
  <h2>Lorem Ipsum 1</h2>
  <p>Lorem Ipsum100</p>
</section>
<section id="about-2" class="page__section wrapper">
  <h2>Lorem Ipsum 2</h2>
  <p>Lorem Ipsum100</p>
</section>
<section id="about-3" class="page__section wrapper">
  <h2>Lorem Ipsum has 3</h2>
  <p>Lorem Ipsum100</p>
</section>

.tabs {
  position: sticky;
  top: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-bottom: 1px solid #000;
  background-color: #f00;
}

.wrapper {
  max-width: 600px;
  margin: 0 auto;
}

Comments

[Ankhena]

Как сделать так что бы блок с сылками не заходил за секции?

За секции это куда?

Дополните вопрос ссылкой на песочницу на codepen.io и скринами как должно быть и что сейчас.
В песочнице должна быть видна проблема.

[hooli-gun]

Ankhena,
Вот так заходит

[Ankhena]

hooli-gun, ну давайте как в детском садике.
Вот ваш код в песочнице: https://codepen.io/AnnaSummer/pen/JjvGmaO
И никто никуда не заходит.

Может, попробуете ещё раз описать проблему?

[hooli-gun]

Ankhena, wrapper это класс, если Вы не знаете как помочь с решением, то пожалуйста не пишите.

[Ankhena]

hooli-gun, медленно: я сделала песочницу из вашего кода. В ней этой проблемы нет.
Сделайте песочницу так, чтобы проблема была видна.
После этого её можно решать.