0

То, что должно получится

HTML

    <header class="header">
      <div class="left-box">
        <div class="logo-box">
          <a href="#">
            <div class="logo-img-box">
              <svg
                class="logo-first"
                viewBox="0 0 35 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M24.5946 0H0V12.7841H1.3208V1.28886H23.2738V5.52746H21.0842V5.53671H21.0684C21.0096 5.65146 20.8861 5.90965 20.698 6.31127C20.5098 6.7129 20.2776 7.20058 20.0012 7.77434C19.7249 8.34809 19.4162 8.98207 19.0752 9.67634C18.7342 10.3706 18.3901 11.0734 18.0433 11.7848C17.6964 12.4963 17.3524 13.1876 17.0114 13.859C16.6704 14.5302 16.3647 15.1241 16.0941 15.6404L10.7143 5.53671H9.09151L16.0941 18.446L22.1009 6.7853H24.5927V6.77176H24.5946V0ZM0 17.1961H0.00609518V17.1819H8.47042L2.42401 5.53671H4.0997L9.84995 17.0175L9.1268 18.446L9.1157 18.4247V18.4398H1.3208V22.7111H23.2738V11.1838H24.5946V24H0V17.1961ZM33.6949 24V0H35.0517V24H33.6949Z"
                  fill="#E4E5EA"
                />
              </svg>
              <svg
                class="logo-second"
                viewBox="0 0 97 15"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M2.00185 0L8.28906 12.5571L7.49834 14.1196L0.169678 0H2.00185ZM22.3871 0L15.1163 14.1196L7.45977 0H9.23407L15.1163 11.051C15.412 10.4861 15.7463 9.83672 16.1191 9.10245C16.492 8.36823 16.8681 7.61205 17.2474 6.8339C17.6267 6.05574 18.0028 5.28701 18.3756 4.52769C18.7484 3.76837 19.086 3.07494 19.3881 2.4474C19.6903 1.81986 19.9442 1.28646 20.1499 0.847178C20.3556 0.407898 20.4906 0.125509 20.5549 0H22.3871ZM36.2619 1.37431V0H26.9275V14.1384H36.2619V12.7642H28.3547V7.7752H34.9505V6.40089H28.3547V1.37431H36.2619ZM40.4167 14.1384V0H41.8438V12.7642H49.7511V14.1384H40.4167ZM53.9058 0V14.1384H60.8294C60.9323 14.1384 61.1606 14.1039 61.5141 14.0349C61.8677 13.9658 62.2502 13.8121 62.6617 13.5737C62.8545 13.4607 63.057 13.3132 63.2691 13.1313C63.4813 12.9492 63.671 12.7265 63.8381 12.4629C64.0053 12.1993 64.1435 11.8887 64.2528 11.5311C64.362 11.1733 64.4167 10.756 64.4167 10.2791C64.4167 9.73941 64.3459 9.26874 64.2046 8.86712C64.0631 8.46549 63.8831 8.12035 63.6645 7.83169C63.4459 7.54301 63.1984 7.31082 62.922 7.13512C62.6455 6.9594 62.366 6.82134 62.083 6.72094C62.366 6.44483 62.6102 6.06517 62.8159 5.58196C63.0216 5.09875 63.1245 4.51828 63.1245 3.84053C63.1245 3.3385 63.0698 2.90551 62.9605 2.54153C62.8513 2.17756 62.7131 1.86379 62.5459 1.60023C62.3787 1.33666 62.1923 1.11702 61.9866 0.941306C61.7809 0.765596 61.5816 0.621263 61.3888 0.508306C61.1702 0.382798 60.9613 0.285531 60.762 0.216501C60.5627 0.147472 60.3827 0.0972684 60.222 0.0658915C60.0612 0.0345144 59.9294 0.0156885 59.8266 0.00941306C59.7237 0.00313766 59.6659 0 59.653 0H53.9058ZM60.7909 12.7642C60.8423 12.7642 60.9838 12.7422 61.2152 12.6982C61.4466 12.6543 61.6942 12.5508 61.9577 12.3877C62.2212 12.2244 62.456 11.9766 62.6617 11.6439C62.8674 11.3114 62.9702 10.8564 62.9702 10.2791C62.9702 9.70172 62.8674 9.24679 62.6617 8.91419C62.456 8.58159 62.2212 8.33058 61.9577 8.16114C61.6942 7.9917 61.4434 7.88502 61.2055 7.8411C60.9677 7.79717 60.8231 7.7752 60.7716 7.7752H55.333V12.7642H60.7909ZM60.0676 6.32559C59.8427 6.3758 59.7044 6.40089 59.653 6.40089H55.333V1.37431H59.653C59.6788 1.37431 59.8008 1.39313 60.0194 1.43078C60.238 1.46844 60.4759 1.56571 60.733 1.72259C60.9902 1.87948 61.2248 2.12422 61.437 2.45681C61.6491 2.78941 61.7552 3.25065 61.7552 3.84053C61.7552 4.41787 61.6556 4.87598 61.4563 5.21484C61.257 5.55372 61.032 5.81101 60.7812 5.98672C60.5306 6.16243 60.2927 6.27539 60.0676 6.32559ZM78.6386 0V1.37431H70.7314V6.40089H77.3272V7.7752H70.7314V12.7642H78.6386V14.1384H69.3043V0H78.6386ZM89.3313 8.11407L94.1529 14.1384H96.0433L90.4307 7.05981L96.0433 0H94.1529L89.3313 6.02437L84.7799 0H82.6392L88.2513 7.05981L82.6392 14.1384H84.7799L89.3313 8.11407Z"
                  fill="#E4E5EA"
                />
              </svg>
            </div>
          </a>
          <p class="logo-text">
            крупный интегратор CRM<br />в России и ещё 8 странах
          </p>
        </div>
        <nav class="main-nav">
          <ul class="main-nav-list">
            <li><a href="#" class="main-nav-link">Услуги</a></li>
            <li><a href="#" class="main-nav-link">Виджеты</a></li>
            <li><a href="#" class="main-nav-link">Интеграции</a></li>
            <li><a href="#" class="main-nav-link">Кейсы</a></li>
            <li><a href="#" class="main-nav-link">Сертификаты</a></li>
          </ul>
        </nav>
      </div>
      <div class="right-box">
        <a href="tel:555-555-5555" class="header-link">+7 555 555-55-55</a>
        <ul class="social-links">
          <li>
            <a href="#" class="header-link">
              <svg
                width="18"
                height="14"
                viewBox="0 0 18 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M16.2208 0.0975332L1.44582 5.79503C0.437482 6.20003 0.443316 6.76253 1.26082 7.01337L5.05415 8.1967L13.8308 2.6592C14.2458 2.4067 14.625 2.54253 14.3133 2.8192L7.20248 9.2367H7.20082L7.20248 9.23753L6.94082 13.1475C7.32415 13.1475 7.49332 12.9717 7.70831 12.7642L9.55082 10.9725L13.3833 13.8034C14.09 14.1925 14.5975 13.9925 14.7733 13.1492L17.2892 1.29253C17.5466 0.260033 16.895 -0.207467 16.2208 0.0975332Z"
                  fill="#E4E5EA"
                />
              </svg>
            </a>
          </li>
          <li>
            <a href="#" class="header-link">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8.77419 0C8.48914 0 8.25806 0.219525 8.25806 0.490323C8.25806 0.76112 8.48914 0.980645 8.77419 0.980645C12.1948 0.980645 14.9677 3.61494 14.9677 6.86452C14.9677 7.13531 15.1988 7.35484 15.4839 7.35484C15.7689 7.35484 16 7.13531 16 6.86452C16 3.07335 12.7649 0 8.77419 0Z"
                  fill="#E4E5EA"
                />
                <path
                  d="M2.1673 1.59966C2.45986 1.4568 2.97514 1.3844 3.27048 1.64579C3.63965 1.97253 4.20861 2.54529 4.59951 3.04502C4.9904 3.54475 5.53764 4.30588 5.61582 4.47502C5.694 4.64416 5.78086 5.24384 5.38997 5.60518C5.07726 5.89425 4.669 6.15104 4.50395 6.2433C4.35049 6.37143 4.09916 6.74764 4.32154 7.22738C4.59951 7.82706 5.19887 9.00335 6.23256 9.87979C7.26625 10.7562 8.36074 11.2175 9.04698 11.3636C9.09061 11.3636 9.14667 11.3735 9.21164 11.385C9.44413 11.426 9.79062 11.4872 10.0894 11.1868C10.3951 10.8793 10.6742 10.5564 10.7756 10.4333C10.9348 10.2693 11.3975 9.9905 11.9743 10.1873C12.6953 10.4333 13.5205 10.9715 13.894 11.2252C14.1928 11.4282 14.8582 11.9095 15.1536 12.1247C15.3331 12.2554 15.6331 12.6445 15.3968 13.1549C15.1014 13.7931 13.8419 15.2 12.7127 15.2C12.2957 15.2 8.26519 14.116 4.70374 11.0561C2.42881 9.10153 0.47054 5.71025 0.134663 4.56728C0.00726174 4.29563 -0.143304 3.62625 0.273647 3.12191C0.690597 2.61756 1.15968 2.09169 2.1673 1.59966Z"
                  fill="#E4E5EA"
                />
                <path
                  d="M8.77419 3.92258C8.48914 3.92258 8.25806 4.14211 8.25806 4.4129C8.25806 4.6837 8.48914 4.90323 8.77419 4.90323C9.91439 4.90323 10.8387 5.78133 10.8387 6.86452C10.8387 7.13531 11.0698 7.35484 11.3548 7.35484C11.6399 7.35484 11.871 7.13531 11.871 6.86452C11.871 5.23973 10.4845 3.92258 8.77419 3.92258Z"
                  fill="#E4E5EA"
                />
                <path
                  d="M8.25806 2.45161C8.25806 2.18082 8.48914 1.96129 8.77419 1.96129C11.6247 1.96129 13.9355 4.15654 13.9355 6.86452C13.9355 7.13531 13.7044 7.35484 13.4194 7.35484C13.1343 7.35484 12.9032 7.13531 12.9032 6.86452C12.9032 4.69813 11.0546 2.94194 8.77419 2.94194C8.48914 2.94194 8.25806 2.72241 8.25806 2.45161Z"
                  fill="#E4E5EA"
                />
              </svg>
            </a>
          </li>
          <li>
            <a href="#" class="header-link">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M13.6687 2.32548C12.9307 1.58614 12.0527 0.999906 11.0854 0.60073C10.1181 0.201554 9.08084 -0.0026233 8.03371 2.54441e-05C3.64281 2.54441e-05 0.0683305 3.55666 0.0665556 7.92847C0.0665556 9.32569 0.433055 10.6893 1.12967 11.8923L0 16L4.22318 14.8969C5.39135 15.5298 6.70011 15.8616 8.03016 15.8622H8.03371C12.4237 15.8622 15.9982 12.3056 16 7.93377C16.003 6.89203 15.7985 5.86002 15.3984 4.8974C14.9982 3.93478 14.4104 3.06063 13.6687 2.32548ZM8.03371 14.5242H8.03104C6.84504 14.5243 5.68086 14.2067 4.66067 13.6048L4.41929 13.4617L1.91325 14.1161L2.58147 11.6847L2.4244 11.4356C1.76132 10.385 1.4103 9.16917 1.41187 7.92847C1.41364 4.29501 4.3838 1.33895 8.03637 1.33895C8.90625 1.33703 9.76788 1.50683 10.5714 1.83853C11.3749 2.17023 12.1043 2.65725 12.7174 3.27138C13.3339 3.88259 13.8224 4.60933 14.1549 5.4096C14.4875 6.20986 14.6573 7.06779 14.6547 7.93377C14.6529 11.5672 11.6827 14.5242 8.03371 14.5242ZM11.6659 9.588C11.4662 9.4882 10.4883 9.00951 10.3055 8.94327C10.1236 8.87703 9.99133 8.84435 9.85822 9.04218C9.72511 9.24002 9.34352 9.68603 9.22727 9.81851C9.11102 9.95099 8.99477 9.96689 8.79599 9.86797C8.59721 9.76905 7.95561 9.55974 7.1951 8.88498C6.6032 8.35947 6.20387 7.71121 6.08762 7.51249C5.97137 7.31377 6.0752 7.2069 6.17547 7.10799C6.2651 7.01967 6.37425 6.87659 6.47364 6.76089C6.57303 6.64519 6.60587 6.56305 6.67242 6.43057C6.73898 6.29809 6.70614 6.1824 6.65556 6.08348C6.60587 5.98368 6.20742 5.00863 6.04147 4.61207C5.88085 4.22788 5.71668 4.27911 5.59422 4.27381C5.46739 4.26865 5.34046 4.26629 5.21352 4.26674C5.11258 4.2693 5.01327 4.29259 4.9218 4.33515C4.83033 4.3777 4.74868 4.4386 4.68196 4.51404C4.49916 4.71276 3.98535 5.19145 3.98535 6.1665C3.98535 7.14155 4.69883 8.08392 4.79821 8.2164C4.8976 8.34888 6.2021 10.3493 8.19876 11.2078C8.67441 11.4118 9.04535 11.5337 9.33376 11.6255C9.8103 11.7766 10.2442 11.7545 10.5877 11.7041C10.9701 11.6476 11.7653 11.2254 11.9312 10.7626C12.0971 10.2999 12.0971 9.9033 12.0475 9.82028C11.9978 9.73726 11.8638 9.68692 11.6659 9.588Z"
                  fill="#E4E5EA"
                />
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </header>
  </body>

CSS

.header {
  max-width: 120rem;
  padding: 5.6rem 3.2rem 0;
  margin: 0 auto;

  display: flex;
  align-items: center;
  gap: 13.7rem;
  height: 9.6rem;
}

.left-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.logo-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo-img-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-first {
  height: 2.4rem;
}

.logo-second {
  height: 1.4rem;
}

.logo-text {
  font-family: "Montserrat";
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.21;
}

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.21;
  color: #e4e5ea;
}

.right-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.header-link:link,
.header-link:visited {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.21;
  color: #e4e5ea;
}

.social-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3.4rem;
}

https://codepen.io/Vi-kry/pen/qBJjNwx

5
  • 1
    Какое именно? и почему так решили? 27 апр 2023 в 12:59
  • и какой-то дикий padding у header по отношению к его высоте. Элементы вываливаются) 27 апр 2023 в 13:03
  • Оно вполне себе срабатывает, в соответствии с тем как Вы его используете.
    – Simon
    27 апр 2023 в 13:06
  • Padding для header я уже раз 5 поменял. По-поводу вываливания элементов - не совсем понял, что имеется ввиду. Может быть я и не вижу, что он срабатывает, не спорю. Но получить желаемый результат, представленный на фотографии, не удается с помощью justify-content.
    – vi-kry
    27 апр 2023 в 13:14
  • @vi-kry ответ внизу. Нажмите кнопку "показать код" и "выполнить код" 27 апр 2023 в 13:16

1 ответ 1

1

justify-content: space-between прекрасно работает, а вот с остальным есть проблемы. Судя по референсной картинке, в правой части space-between и не нужен. Высота header тоже лишняя. align-items: center тоже мимо. Добавим пару gap-чиков и более-менее.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  background-color: #1e1e1e;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.21;
  font-weight: 400;
  color: #e4e5ea;
}

.header {
  max-width: 120rem;
  padding: 5.6rem 3.2rem 0;
  margin: 0 auto;
  display: flex;  
}

.left-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.logo-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo-img-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-first {
  height: 2.4rem;
}

.logo-second {
  height: 1.4rem;
}

.logo-text {
  font-family: "Montserrat";
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.21;
}

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.21;
  color: #e4e5ea;
}

.right-box {
  width: 100%;
  display: flex;
  justify-content: end;  
  gap: 50px;
}

.header-link:link,
.header-link:visited {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.21;
  color: #e4e5ea;
}

.social-links {
  list-style: none;
  display: flex;  
  gap: 3.4rem;
}
<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" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Inter:wght@400;500;700&family=Kanit:wght@400;700&family=Rubik:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Inter:wght@400;500;700;900&family=Kanit:wght@400;700&family=Montserrat:wght@300;400&family=Rubik:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/general.css" rel="stylesheet" type="text/css" />

    <title>Welbex</title>
  </head>
  <body>
    <header class="header">
      <div class="left-box">
        <div class="logo-box">
          <a href="#">
            <div class="logo-img-box">
              <svg
                class="logo-first"
                viewBox="0 0 35 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M24.5946 0H0V12.7841H1.3208V1.28886H23.2738V5.52746H21.0842V5.53671H21.0684C21.0096 5.65146 20.8861 5.90965 20.698 6.31127C20.5098 6.7129 20.2776 7.20058 20.0012 7.77434C19.7249 8.34809 19.4162 8.98207 19.0752 9.67634C18.7342 10.3706 18.3901 11.0734 18.0433 11.7848C17.6964 12.4963 17.3524 13.1876 17.0114 13.859C16.6704 14.5302 16.3647 15.1241 16.0941 15.6404L10.7143 5.53671H9.09151L16.0941 18.446L22.1009 6.7853H24.5927V6.77176H24.5946V0ZM0 17.1961H0.00609518V17.1819H8.47042L2.42401 5.53671H4.0997L9.84995 17.0175L9.1268 18.446L9.1157 18.4247V18.4398H1.3208V22.7111H23.2738V11.1838H24.5946V24H0V17.1961ZM33.6949 24V0H35.0517V24H33.6949Z"
                  fill="#E4E5EA"
                />
              </svg>
              <svg
                class="logo-second"
                viewBox="0 0 97 15"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M2.00185 0L8.28906 12.5571L7.49834 14.1196L0.169678 0H2.00185ZM22.3871 0L15.1163 14.1196L7.45977 0H9.23407L15.1163 11.051C15.412 10.4861 15.7463 9.83672 16.1191 9.10245C16.492 8.36823 16.8681 7.61205 17.2474 6.8339C17.6267 6.05574 18.0028 5.28701 18.3756 4.52769C18.7484 3.76837 19.086 3.07494 19.3881 2.4474C19.6903 1.81986 19.9442 1.28646 20.1499 0.847178C20.3556 0.407898 20.4906 0.125509 20.5549 0H22.3871ZM36.2619 1.37431V0H26.9275V14.1384H36.2619V12.7642H28.3547V7.7752H34.9505V6.40089H28.3547V1.37431H36.2619ZM40.4167 14.1384V0H41.8438V12.7642H49.7511V14.1384H40.4167ZM53.9058 0V14.1384H60.8294C60.9323 14.1384 61.1606 14.1039 61.5141 14.0349C61.8677 13.9658 62.2502 13.8121 62.6617 13.5737C62.8545 13.4607 63.057 13.3132 63.2691 13.1313C63.4813 12.9492 63.671 12.7265 63.8381 12.4629C64.0053 12.1993 64.1435 11.8887 64.2528 11.5311C64.362 11.1733 64.4167 10.756 64.4167 10.2791C64.4167 9.73941 64.3459 9.26874 64.2046 8.86712C64.0631 8.46549 63.8831 8.12035 63.6645 7.83169C63.4459 7.54301 63.1984 7.31082 62.922 7.13512C62.6455 6.9594 62.366 6.82134 62.083 6.72094C62.366 6.44483 62.6102 6.06517 62.8159 5.58196C63.0216 5.09875 63.1245 4.51828 63.1245 3.84053C63.1245 3.3385 63.0698 2.90551 62.9605 2.54153C62.8513 2.17756 62.7131 1.86379 62.5459 1.60023C62.3787 1.33666 62.1923 1.11702 61.9866 0.941306C61.7809 0.765596 61.5816 0.621263 61.3888 0.508306C61.1702 0.382798 60.9613 0.285531 60.762 0.216501C60.5627 0.147472 60.3827 0.0972684 60.222 0.0658915C60.0612 0.0345144 59.9294 0.0156885 59.8266 0.00941306C59.7237 0.00313766 59.6659 0 59.653 0H53.9058ZM60.7909 12.7642C60.8423 12.7642 60.9838 12.7422 61.2152 12.6982C61.4466 12.6543 61.6942 12.5508 61.9577 12.3877C62.2212 12.2244 62.456 11.9766 62.6617 11.6439C62.8674 11.3114 62.9702 10.8564 62.9702 10.2791C62.9702 9.70172 62.8674 9.24679 62.6617 8.91419C62.456 8.58159 62.2212 8.33058 61.9577 8.16114C61.6942 7.9917 61.4434 7.88502 61.2055 7.8411C60.9677 7.79717 60.8231 7.7752 60.7716 7.7752H55.333V12.7642H60.7909ZM60.0676 6.32559C59.8427 6.3758 59.7044 6.40089 59.653 6.40089H55.333V1.37431H59.653C59.6788 1.37431 59.8008 1.39313 60.0194 1.43078C60.238 1.46844 60.4759 1.56571 60.733 1.72259C60.9902 1.87948 61.2248 2.12422 61.437 2.45681C61.6491 2.78941 61.7552 3.25065 61.7552 3.84053C61.7552 4.41787 61.6556 4.87598 61.4563 5.21484C61.257 5.55372 61.032 5.81101 60.7812 5.98672C60.5306 6.16243 60.2927 6.27539 60.0676 6.32559ZM78.6386 0V1.37431H70.7314V6.40089H77.3272V7.7752H70.7314V12.7642H78.6386V14.1384H69.3043V0H78.6386ZM89.3313 8.11407L94.1529 14.1384H96.0433L90.4307 7.05981L96.0433 0H94.1529L89.3313 6.02437L84.7799 0H82.6392L88.2513 7.05981L82.6392 14.1384H84.7799L89.3313 8.11407Z"
                  fill="#E4E5EA"
                />
              </svg>
            </div>
          </a>
          <p class="logo-text">
            крупный интегратор CRM<br />в России и ещё 8 странах
          </p>
        </div>
        <nav class="main-nav">
          <ul class="main-nav-list">
            <li><a href="#" class="main-nav-link">Услуги</a></li>
            <li><a href="#" class="main-nav-link">Виджеты</a></li>
            <li><a href="#" class="main-nav-link">Интеграции</a></li>
            <li><a href="#" class="main-nav-link">Кейсы</a></li>
            <li><a href="#" class="main-nav-link">Сертификаты</a></li>
          </ul>
        </nav>
      </div>
      <div class="right-box">
        <a href="tel:555-555-5555" class="header-link">+7 555 555-55-55</a>
        <ul class="social-links">
          <li>
            <a href="#" class="header-link">
              <svg
                width="18"
                height="14"
                viewBox="0 0 18 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M16.2208 0.0975332L1.44582 5.79503C0.437482 6.20003 0.443316 6.76253 1.26082 7.01337L5.05415 8.1967L13.8308 2.6592C14.2458 2.4067 14.625 2.54253 14.3133 2.8192L7.20248 9.2367H7.20082L7.20248 9.23753L6.94082 13.1475C7.32415 13.1475 7.49332 12.9717 7.70831 12.7642L9.55082 10.9725L13.3833 13.8034C14.09 14.1925 14.5975 13.9925 14.7733 13.1492L17.2892 1.29253C17.5466 0.260033 16.895 -0.207467 16.2208 0.0975332Z"
                  fill="#E4E5EA"
                />
              </svg>
            </a>
          </li>
          <li>
            <a href="#" class="header-link">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M8.77419 0C8.48914 0 8.25806 0.219525 8.25806 0.490323C8.25806 0.76112 8.48914 0.980645 8.77419 0.980645C12.1948 0.980645 14.9677 3.61494 14.9677 6.86452C14.9677 7.13531 15.1988 7.35484 15.4839 7.35484C15.7689 7.35484 16 7.13531 16 6.86452C16 3.07335 12.7649 0 8.77419 0Z"
                  fill="#E4E5EA"
                />
                <path
                  d="M2.1673 1.59966C2.45986 1.4568 2.97514 1.3844 3.27048 1.64579C3.63965 1.97253 4.20861 2.54529 4.59951 3.04502C4.9904 3.54475 5.53764 4.30588 5.61582 4.47502C5.694 4.64416 5.78086 5.24384 5.38997 5.60518C5.07726 5.89425 4.669 6.15104 4.50395 6.2433C4.35049 6.37143 4.09916 6.74764 4.32154 7.22738C4.59951 7.82706 5.19887 9.00335 6.23256 9.87979C7.26625 10.7562 8.36074 11.2175 9.04698 11.3636C9.09061 11.3636 9.14667 11.3735 9.21164 11.385C9.44413 11.426 9.79062 11.4872 10.0894 11.1868C10.3951 10.8793 10.6742 10.5564 10.7756 10.4333C10.9348 10.2693 11.3975 9.9905 11.9743 10.1873C12.6953 10.4333 13.5205 10.9715 13.894 11.2252C14.1928 11.4282 14.8582 11.9095 15.1536 12.1247C15.3331 12.2554 15.6331 12.6445 15.3968 13.1549C15.1014 13.7931 13.8419 15.2 12.7127 15.2C12.2957 15.2 8.26519 14.116 4.70374 11.0561C2.42881 9.10153 0.47054 5.71025 0.134663 4.56728C0.00726174 4.29563 -0.143304 3.62625 0.273647 3.12191C0.690597 2.61756 1.15968 2.09169 2.1673 1.59966Z"
                  fill="#E4E5EA"
                />
                <path
                  d="M8.77419 3.92258C8.48914 3.92258 8.25806 4.14211 8.25806 4.4129C8.25806 4.6837 8.48914 4.90323 8.77419 4.90323C9.91439 4.90323 10.8387 5.78133 10.8387 6.86452C10.8387 7.13531 11.0698 7.35484 11.3548 7.35484C11.6399 7.35484 11.871 7.13531 11.871 6.86452C11.871 5.23973 10.4845 3.92258 8.77419 3.92258Z"
                  fill="#E4E5EA"
                />
                <path
                  d="M8.25806 2.45161C8.25806 2.18082 8.48914 1.96129 8.77419 1.96129C11.6247 1.96129 13.9355 4.15654 13.9355 6.86452C13.9355 7.13531 13.7044 7.35484 13.4194 7.35484C13.1343 7.35484 12.9032 7.13531 12.9032 6.86452C12.9032 4.69813 11.0546 2.94194 8.77419 2.94194C8.48914 2.94194 8.25806 2.72241 8.25806 2.45161Z"
                  fill="#E4E5EA"
                />
              </svg>
            </a>
          </li>
          <li>
            <a href="#" class="header-link">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M13.6687 2.32548C12.9307 1.58614 12.0527 0.999906 11.0854 0.60073C10.1181 0.201554 9.08084 -0.0026233 8.03371 2.54441e-05C3.64281 2.54441e-05 0.0683305 3.55666 0.0665556 7.92847C0.0665556 9.32569 0.433055 10.6893 1.12967 11.8923L0 16L4.22318 14.8969C5.39135 15.5298 6.70011 15.8616 8.03016 15.8622H8.03371C12.4237 15.8622 15.9982 12.3056 16 7.93377C16.003 6.89203 15.7985 5.86002 15.3984 4.8974C14.9982 3.93478 14.4104 3.06063 13.6687 2.32548ZM8.03371 14.5242H8.03104C6.84504 14.5243 5.68086 14.2067 4.66067 13.6048L4.41929 13.4617L1.91325 14.1161L2.58147 11.6847L2.4244 11.4356C1.76132 10.385 1.4103 9.16917 1.41187 7.92847C1.41364 4.29501 4.3838 1.33895 8.03637 1.33895C8.90625 1.33703 9.76788 1.50683 10.5714 1.83853C11.3749 2.17023 12.1043 2.65725 12.7174 3.27138C13.3339 3.88259 13.8224 4.60933 14.1549 5.4096C14.4875 6.20986 14.6573 7.06779 14.6547 7.93377C14.6529 11.5672 11.6827 14.5242 8.03371 14.5242ZM11.6659 9.588C11.4662 9.4882 10.4883 9.00951 10.3055 8.94327C10.1236 8.87703 9.99133 8.84435 9.85822 9.04218C9.72511 9.24002 9.34352 9.68603 9.22727 9.81851C9.11102 9.95099 8.99477 9.96689 8.79599 9.86797C8.59721 9.76905 7.95561 9.55974 7.1951 8.88498C6.6032 8.35947 6.20387 7.71121 6.08762 7.51249C5.97137 7.31377 6.0752 7.2069 6.17547 7.10799C6.2651 7.01967 6.37425 6.87659 6.47364 6.76089C6.57303 6.64519 6.60587 6.56305 6.67242 6.43057C6.73898 6.29809 6.70614 6.1824 6.65556 6.08348C6.60587 5.98368 6.20742 5.00863 6.04147 4.61207C5.88085 4.22788 5.71668 4.27911 5.59422 4.27381C5.46739 4.26865 5.34046 4.26629 5.21352 4.26674C5.11258 4.2693 5.01327 4.29259 4.9218 4.33515C4.83033 4.3777 4.74868 4.4386 4.68196 4.51404C4.49916 4.71276 3.98535 5.19145 3.98535 6.1665C3.98535 7.14155 4.69883 8.08392 4.79821 8.2164C4.8976 8.34888 6.2021 10.3493 8.19876 11.2078C8.67441 11.4118 9.04535 11.5337 9.33376 11.6255C9.8103 11.7766 10.2442 11.7545 10.5877 11.7041C10.9701 11.6476 11.7653 11.2254 11.9312 10.7626C12.0971 10.2999 12.0971 9.9033 12.0475 9.82028C11.9978 9.73726 11.8638 9.68692 11.6659 9.588Z"
                  fill="#E4E5EA"
                />
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </header>
  </body>
</html>

4
  • на макете, который я смотрю (figma.com/file/rgIenOj7gWLP21Yi7UJZ0G/…) не даны размеров для gap'ов. Поэтому я и решил, что следует без них и выполнить эту секцию. Из решений в голову пришло justify-content. Возможно, я и не прав с выбором для решения данной задачи
    – vi-kry
    27 апр 2023 в 13:16
  • Можно и без гэпов. justify-content применяется только к первому уровню вложенности. Возможно вы хотели увидеть эффект, на который это свойство не расчитано 27 апр 2023 в 13:18
  • Ну то есть я, скорее всего, просто перемудрил со возможностями свойства justify-content? Если иным образом нельзя сделать(помимо использований gap), то тогда и мучаться нет смысла
    – vi-kry
    27 апр 2023 в 13:24
  • @vi-kry Да придумать можно сколько угодно разных способов. Можно также задать соотношения размеров левой и правой части через свойство flex у дочерних элементов left-box и right-box. И вот тогда уже без gap можно применить justify-content: space-between 27 апр 2023 в 13:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.