1.要修剪行的开头和结尾，可以使用以下CSS代码。我删除了border-bottom，并使用::before选择器添加了蓝线。此外，我使用transform属性来线性调整::before选择器创建的直线。我还删除了固定的top属性值18，并将其替换为transform属性，以确保点与各种大小对齐。
1.要实现更窄的文本，您可以使用letter-spacing，或者在我看来，您可以使用所需设计中存在的字体。

.wraper {
  padding: 50px;
  text-align: center;
  font-family: sans-serif;
  max-width: 1300px;
  margin: 10px auto;
}

.container_wraper {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}

.link {
  position: relative;
  width: 100%;
}

.link::before {
  content: "";
  height: 2px;
  display: block;
  background-color: #293ff9;
  width: 100%;
  transform: translateX(50%);
}

.link:last-child:before {
  content: "";
  width: 0;
}

.link a {
  font-weight: bold;
  font-size: 16px;
  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #293ff9;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 10px;
  display: block;
}

/* .link:first-child {
    margin-left: -55px;
  }
  
  .link:last-child {
    margin-right: -55px;
  } */

.link::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  position: absolute;
  border-radius: 10px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid blue;
}

.link:hover::after {
  background: #293ff9;
}

.lead {
  display: flex;
  list-style: none;
  text-align: center;
  margin: 0 1px 0 1px;
  padding: 0;
  overflow-wrap: break-word;
  font-weight: bold;
  font-size: 10px;
  margin-top: 3px;
  font: sans-serif;
  letter-spacing: 1px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1px;
}

<div class="wraper">

  <ul class="container_wraper">
    <li class="link"><a href="">Materiały</a></li>
    <li class="link"><a href="">Algorytmy</a></li>
    <li class="link active"><a href="">Szkolenia</a></li>
  </ul>
  <div class="lead">
    <p class="lead1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eligendi non id doloremque aliquid provident nobis consectetur recus.!</p>
    <p class="lead2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vel perferendis repellat laborum iure laudantium ex ipsa repellendus dignissimos iusto.</p>
    <p class="lead3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae officiis quae mollitia totam quis cumque a iste sapiente impedit neque illo eos .</p>
  </div>
</div>