How to make header elements responsive?

I have a header that I customize at the time based on the dimensions of my screen, placing the icons on the right margin using the margin-left property. At the time I thought it would look good but I didn't take into account the responsive design and now I find myself in the problem of my icons overflowing to the right when testing their response on different screens and sticking out of the header where they should be contained. In addition to what overflows, the screen extends to the sides because I positioned them badly from the beginning.

How can I make my header responsive without my elements overflowing to the sides?

enter image description here

I was trying with the display block in CSS but I had no results, as with the Bootstrap properties justify-content-center align-items-center, they did not manage to solve my.

@media (min-width: 600px) {
  .grid-container {
    grid-template: "navbar header" 65px "main  main" auto "footer  footer" 100px / 200px auto;
  }
  .main .row3 {
    max-height: 35vh;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template: "navbar  header  header" 55px "main    main    main" auto "footer  footer  footer" 100px / 200px auto 200px;
  }
  .main .row3 {
    max-height: 35vh;
  }
}


/* -----------------  header  ----------------- */

.header {
  padding-top: 1.2%;
  grid-area: header;
  display: flex;
  border-radius: 0 0 0 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background: #5a415a;
  border-left: 2.5px solid #EEE7CE;
  border-bottom: 2.5px solid #EEE7CE;
  margin-left: 2%;
}

.header .logo {
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 450;
  color: white;
  white-space: nowrap;
}

.header .logo i {
  display: inline-flex;
  color: #a800a8;
  font-size: 1.9rem;
}

.header .logoLupa {
  color: rgb(255, 255, 255);
  margin-left: 55%;
  font-size: 1.4rem;
}

.header .logoHeart {
  color: rgb(255, 255, 255);
  margin-left: 3%;
  font-size: 1.7rem;
  margin-top: -.3%;
}

.header .icons div,
.header .icons a {
  font-size: 1.5rem;
  margin-left: auto;
  cursor: pointer;
  color: #ffffff;
  display: inline;
}

.header .icons div:hover,
.header .icons a:hover {
  color: #FFC728;
}

.header .menu-button {
  background-color: transparent;
  color: white;
  margin-left: 170%;
  margin-top: -15%;
  font-size: 1.7rem;
  cursor: pointer;
  border: transparent;
}

.header .right-menu {
  position: relative;
  display: inline-block;
}

.header .dropdown-menu {
  display: none;
  position: absolute;
  background-color: #EEE7CE;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgb(0, 0, 0, 0.2);
}

.header .dropdown-menu a {
  color: #000000;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}

.header .dropdown-menu a:hover {
  background-color: #000000;
  color: #EEE7CE;
}

.header .right-menu:hover .dropdown-menu {
  display: block;
}

.header .right-menu:hover .menu-button {
  background-color: transparent;
}

.header .btn-warning {
  background-color: #f08370;
  margin-left: 90%;
  margin-top: -5%;
  border-color: #f08370;
}

.header .btn-warning:hover {
  font-weight: 500;
  color: #ffffff;
  background-color: #000000;
  border-color: #ff4828;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ===== Iconscout CSS ===== -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="newstyleBox.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body class="grid-container">
  <!----------- ENCABEZADO ----------->
  <header class="header">
    <a href="/" class="logo"> <i class="uil uil-book-alt"></i> Biblioteca</a>



    <!-- SE DESBORDAN DEL BORDE DERECHO AL PROBAR RESPONSIVE -->
    <a href="/exploreBooksPublic" class="logoLupa"> <i class="fa-solid fa-magnifying-glass"></i></a>

    <a href="#" class="logoHeart"> <i class="uil uil-heart"></i></a>

    <div class="loggedin">
      <div class="wrapper">
        <div class="right-menu">
          <a class="btn btn-warning" href="/login" role="button">Acceder</a>
        </div>
      </div>
    </div>
  </header>


</body>

</html>

Solution

Try adjusting the HTML a bit and taking advantage of justify-content: space-between flex property to space the left and right header elements apart no matter the size of the container. In the header right elements you can also evenly space those with the gap property.

@media (min-width: 600px) {
  .grid-container {
    grid-template: "navbar header" 65px "main  main" auto "footer  footer" 100px / 200px auto;
  }
  .main .row3 {
    max-height: 35vh;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template: "navbar  header  header" 55px "main    main    main" auto "footer  footer  footer" 100px / 200px auto 200px;
  }
  .main .row3 {
    max-height: 35vh;
  }
}


/* -----------------  header  ----------------- */

.header {
  padding-top: 1.2%;
  grid-area: header;
  display: flex;
  border-radius: 0 0 0 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background: #5a415a;
  border-left: 2.5px solid #EEE7CE;
  border-bottom: 2.5px solid #EEE7CE;
  margin-left: 2%;
}

.header .logo {
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 450;
  color: white;
  white-space: nowrap;
}

.header .logo i {
  display: inline-flex;
  color: #a800a8;
  font-size: 1.9rem;
}

.header .logoLupa {
  color: rgb(255, 255, 255);
  font-size: 1.4rem;
}

.header .logoHeart {
  color: rgb(255, 255, 255);
  font-size: 1.7rem;
}

.header .icons div,
.header .icons a {
  font-size: 1.5rem;
  margin-left: auto;
  cursor: pointer;
  color: #ffffff;
  display: inline;
}

.header .icons div:hover,
.header .icons a:hover {
  color: #FFC728;
}

.header .menu-button {
  background-color: transparent;
  color: white;
  font-size: 1.7rem;
  cursor: pointer;
  border: transparent;
}

.header .right-menu {
  position: relative;
  display: inline-block;
}

.header .dropdown-menu {
  display: none;
  position: absolute;
  background-color: #EEE7CE;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgb(0, 0, 0, 0.2);
}

.header .dropdown-menu a {
  color: #000000;
  padding: 10px 12px;
  text-decoration: none;
  display: block;
}

.header .dropdown-menu a:hover {
  background-color: #000000;
  color: #EEE7CE;
}

.header .right-menu:hover .dropdown-menu {
  display: block;
}

.header .right-menu:hover .menu-button {
  background-color: transparent;
}

.header .btn-warning {
  background-color: #f08370;
  border-color: #f08370;
}

.header .btn-warning:hover {
  font-weight: 500;
  color: #ffffff;
  background-color: #000000;
  border-color: #ff4828;
}

/* New CSS */
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ===== Iconscout CSS ===== -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="newstyleBox.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body class="grid-container">
  <!----------- ENCABEZADO ----------->
  <header class="header">
    <div class="header-left">
      <a href="/" class="logo"> <i class="uil uil-book-alt"></i> Biblioteca</a>
    </div>

    <!-- SE DESBORDAN DEL BORDE DERECHO AL PROBAR RESPONSIVE -->
    <div class="header-right">
      <a href="/exploreBooksPublic" class="logoLupa"> <i class="fa-solid fa-magnifying-glass"></i></a>

      <a href="#" class="logoHeart"> <i class="uil uil-heart"></i></a>

      <div class="loggedin">
        <div class="wrapper">
          <div class="right-menu">
            <a class="btn btn-warning" href="/login" role="button">Acceder</a>
          </div>
        </div>
      </div>
    </div>
  </header>


</body>

</html>