Элементы CSS выходят за пределы страницы

В чем заключается проблема, все элементы внутри меню, растягиваются на максимум с отступом сверху, получается так что они идут до самого низа страница не учитывая внутренний padding меню и получается так что элементы выходят за пределы страницы

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #232323;
}

.menu {
    height: 100%;
    width: 50px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: auto;
    background-color: #3071E7;
    position: fixed;
    display: flex;
    align-items: center;
}

.menu-content {
    height: 100%;
    width: 50px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.menu .navigation {
    flex: 1;
    width: 40px;
    margin-top: 10px;
    display: flex;
    list-style-type: none;
    flex-direction: column;
    position: relative;
}

.menu .navigation a {
    height: 30px;
    width: 30px;
}

.menu .navigation .navigation-button {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 10px;
    margin-top: 10px;
    transition: 0.2s;
    text-decoration: none;
    cursor: pointer;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .navigation .navigation-button:first-child {
    margin-top: 0px !important;
}

.menu .navigation .navigation-button:nth-child(2) {
    margin-top: auto;
}

.setting {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    align-content: start;
    justify-content: center;
}
.setting a {
    margin-top: 10px;
    position: relative;
}
.setting a:first-child {
    margin-top: 0px !important;
}
.setting-active {
    height: max-content !important;
}
<div class="menu">
    <div class="menu-content">
        <div class="mini-logo">
            <svg width="24" height="35" viewBox="0 0 24 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="14.603" width="7.93651" height="30.1587" fill="white"/>
                <rect y="7.61719" width="8.09524" height="22.5397" fill="white"/>
                <path d="M6.98558 7.61721L10.3178 7.61721L22.6987 30.1583L14.6035 30.1583L8.09513 22.5389L6.98558 7.61721Z" fill="white"/>
            </svg>                
        </div>
        <ul class="navigation">
            <li class="navigation-button">
                <a id="note-add">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="black"/>
                    </svg>
                </a>                
            </li>
            <li class="navigation-button logout">
                <a id="logout">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 27.5C8.09644 27.5 2.5 21.9035 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C19.0891 2.5 22.7196 4.46347 25.0003 7.49904L21.6136 7.49914C19.8509 5.94374 17.5356 5 15 5C9.47715 5 5 9.47715 5 15C5 20.5229 9.47715 25 15 25C17.5363 25 19.852 24.0557 21.6149 22.4997H25.0011C22.7206 25.536 19.0896 27.5 15 27.5ZM23.75 20V16.25H13.75V13.75H23.75V10L30 15L23.75 20Z" fill="black"/>
                    </svg>
                </a>                          
            </li>
            <li class="navigation-button setting">
                <a id="setting">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.17432 21.2501C3.63401 20.3143 3.22846 19.3376 2.95166 18.3425C4.16725 17.7223 4.99965 16.4584 4.99965 15.0001C4.99965 13.543 4.1685 12.2799 2.95441 11.6591C3.51281 9.64551 4.57321 7.77021 6.08092 6.23739C7.22587 6.98008 8.73669 7.06905 9.99965 6.33988C11.2626 5.6107 11.941 4.25781 11.8702 2.89493C13.9516 2.35563 16.1059 2.37493 18.1289 2.89815C18.0594 4.25995 18.7376 5.61128 19.9996 6.33988C21.2626 7.06903 22.7734 6.98008 23.9182 6.23746C24.6416 6.9747 25.2846 7.81426 25.825 8.75014C26.3652 9.686 26.7709 10.6627 27.0476 11.6577C25.832 12.278 24.9996 13.5419 24.9996 15.0001C24.9996 16.4574 25.8307 17.7204 27.0449 18.3411C26.4865 20.3548 25.4261 22.23 23.9184 23.7629C22.7734 23.0203 21.2626 22.9313 19.9996 23.6604C18.7366 24.3895 18.0584 25.7425 18.129 27.1054C16.0477 27.6446 13.8935 27.6254 11.8704 27.1021C11.9399 25.7403 11.2616 24.389 9.99965 23.6604C8.73672 22.9313 7.22599 23.0201 6.08105 23.7628C5.35771 23.0255 4.71465 22.186 4.17432 21.2501ZM11.2496 21.4954C12.6139 22.283 13.5936 23.5283 14.0629 24.9573C14.6857 25.0165 15.3127 25.0174 15.9357 24.9593C16.4047 23.5295 17.3847 22.2834 18.7496 21.4954C20.1145 20.7073 21.6837 20.4818 23.1565 20.7904C23.5182 20.2799 23.831 19.7364 24.0911 19.1674C23.0882 18.0465 22.4996 16.5754 22.4996 15.0001C22.4996 13.4249 23.0882 11.9539 24.0911 10.833C23.961 10.5505 23.8172 10.2727 23.6599 10.0001C23.5025 9.72761 23.3337 9.46423 23.1541 9.2104C21.6821 9.51833 20.1139 9.29255 18.7496 8.50494C17.3854 7.71731 16.4057 6.47198 15.9364 5.04306C15.3136 4.9838 14.6865 4.98295 14.0636 5.04103C13.5945 6.47076 12.6145 7.71693 11.2496 8.50494C9.88475 9.29296 8.31556 9.51855 6.84285 9.20991C6.48106 9.72039 6.16829 10.2638 5.9082 10.8328C6.91101 11.9538 7.49965 13.4249 7.49965 15.0001C7.49965 16.5754 6.91104 18.0464 5.9082 19.1673C6.03834 19.4498 6.18205 19.7276 6.3394 20.0001C6.49673 20.2726 6.6655 20.536 6.84515 20.7899C8.31721 20.482 9.88547 20.7078 11.2496 21.4954ZM14.9996 18.7501C12.9286 18.7501 11.2496 17.0713 11.2496 15.0001C11.2496 12.9291 12.9286 11.2501 14.9996 11.2501C17.0707 11.2501 18.7496 12.9291 18.7496 15.0001C18.7496 17.0713 17.0707 18.7501 14.9996 18.7501ZM14.9996 16.2501C15.69 16.2501 16.2496 15.6905 16.2496 15.0001C16.2496 14.3098 15.69 13.7501 14.9996 13.7501C14.3092 13.7501 13.7496 14.3098 13.7496 15.0001C13.7496 15.6905 14.3092 16.2501 14.9996 16.2501Z" fill="black"/>
                    </svg>
                </a>
                <a>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.0012 2.5C8.09497 2.5 2.50122 8.09375 2.50122 15C2.50122 20.5313 6.07935 25.2031 11.0481 26.8594C11.6731 26.9687 11.9075 26.5938 11.9075 26.2656C11.9075 25.9688 11.8918 24.9844 11.8918 23.9375C8.75122 24.5156 7.93872 23.1719 7.68872 22.4688C7.5481 22.1094 6.93872 21 6.40747 20.7031C5.96997 20.4688 5.34497 19.8906 6.39185 19.875C7.37622 19.8594 8.07935 20.7812 8.31372 21.1562C9.43872 23.0469 11.2356 22.5156 11.9543 22.1875C12.0637 21.375 12.3918 20.8281 12.7512 20.5156C9.96997 20.2031 7.06372 19.125 7.06372 14.3438C7.06372 12.9844 7.5481 11.8594 8.34497 10.9844C8.21997 10.6719 7.78247 9.39062 8.46997 7.67187C8.46997 7.67187 9.51685 7.34375 11.9075 8.95312C12.9075 8.67187 13.97 8.53125 15.0325 8.53125C16.095 8.53125 17.1575 8.67187 18.1575 8.95312C20.5481 7.32812 21.595 7.67187 21.595 7.67187C22.2825 9.39062 21.845 10.6719 21.72 10.9844C22.5169 11.8594 23.0012 12.9688 23.0012 14.3438C23.0012 19.1406 20.0794 20.2031 17.2981 20.5156C17.7512 20.9063 18.1419 21.6563 18.1419 22.8281C18.1419 24.5 18.1262 25.8438 18.1262 26.2656C18.1262 26.5938 18.3606 26.9844 18.9856 26.8594C24.0737 25.1416 27.4999 20.3704 27.5012 15C27.5012 8.09375 21.9075 2.5 15.0012 2.5Z" fill="black"/>
                    </svg>
                </a>
                <a>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M25 15C25 20.5229 20.5229 25 15 25C9.47715 25 5 20.5229 5 15C5 9.47715 9.47715 5 15 5C20.5229 5 25 9.47715 25 15ZM15 27.5C21.9035 27.5 27.5 21.9035 27.5 15C27.5 8.09644 21.9035 2.5 15 2.5C8.09644 2.5 2.5 8.09644 2.5 15C2.5 21.9035 8.09644 27.5 15 27.5ZM15.448 11.7281C14.2321 12.2338 11.8022 13.2805 8.15825 14.8681C7.56651 15.1034 7.25655 15.3336 7.22833 15.5586C7.18064 15.9391 7.65701 16.0889 8.30572 16.2929C8.39396 16.3206 8.4854 16.3494 8.57912 16.3799C9.21735 16.5872 10.0759 16.83 10.5222 16.8396C10.927 16.8484 11.3789 16.6815 11.8778 16.3389C15.2825 14.0406 17.04 12.879 17.1504 12.854C17.2282 12.8363 17.3361 12.8141 17.4091 12.879C17.4823 12.944 17.475 13.067 17.4674 13.1C17.4201 13.3012 15.5501 15.0398 14.5824 15.9394C14.2939 16.2076 14.0126 16.4816 13.7291 16.7549C13.1363 17.3264 12.6916 17.755 13.7538 18.455C14.8305 19.1646 15.9154 19.8728 16.9655 20.6214C17.4834 20.9906 17.9487 21.3224 18.5235 21.2695C18.8576 21.2388 19.2026 20.9246 19.3778 19.9879C19.7919 17.7741 20.6059 12.9776 20.794 11.001C20.8105 10.8279 20.7897 10.6063 20.7731 10.509C20.7565 10.4117 20.7216 10.273 20.5953 10.1704C20.4454 10.0489 20.2142 10.0233 20.1109 10.0251C19.6406 10.0334 18.9194 10.2842 15.448 11.7281Z" fill="black"/>
                    </svg>
                </a>
                <a>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.79386 8.06661C6.06376 9.86435 5 12.3079 5 15C5 20.5229 9.47715 25 15 25C16.351 25 17.6395 24.7321 18.8151 24.2465C18.9589 23.3084 18.6435 22.4083 18.5145 22.0933C18.2275 21.3938 17.2801 20.1978 15.6986 18.5385C15.2765 18.0948 15.3036 17.7544 15.4545 16.7429L15.4719 16.6286C15.5744 15.9358 15.7464 15.5261 18.0778 15.156C19.2621 14.9682 19.5736 15.4416 20.0054 16.0971C20.0531 16.1697 20.1009 16.241 20.1498 16.3124C20.5599 16.9121 20.8638 17.0493 21.3228 17.258C21.5284 17.3513 21.785 17.4689 22.1289 17.6643C22.9439 18.13 22.9439 18.6559 22.9439 19.809V19.9398C22.9439 20.4293 22.896 20.859 22.8207 21.2324C24.1847 19.5231 25 17.3568 25 15C25 10.8761 22.5038 7.33525 18.9399 5.80603C18.2484 6.27266 17.2997 6.93407 16.9687 7.3875C16.7995 7.61922 16.5602 8.80208 15.7821 8.8997C15.5782 8.92529 15.3048 8.90736 15.015 8.88871C14.2381 8.83823 13.1752 8.77008 12.835 9.69369C12.619 10.279 12.581 11.8681 13.2799 12.6929C13.3918 12.8246 13.4134 13.0684 13.3374 13.3419C13.2375 13.701 13.0357 13.9195 12.9729 13.9646C12.8524 13.8954 12.612 13.6164 12.4492 13.4265C12.0569 12.9706 11.5676 12.4029 10.935 12.2272C10.7049 12.1635 10.4521 12.1108 10.2068 12.0592C9.5205 11.9153 8.74304 11.7517 8.5624 11.3663C8.43052 11.084 8.4311 10.6953 8.43161 10.2846C8.43161 9.764 8.43161 9.17536 8.17661 8.6032C8.07807 8.38176 7.94611 8.20557 7.79386 8.06661ZM15 27.5C8.09644 27.5 2.5 21.9035 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9035 2.5 27.5 8.09644 27.5 15C27.5 21.9035 21.9035 27.5 15 27.5Z" fill="black"/>
                    </svg>
                </a>                                                             
            </li>
        </ul>
    </div>
</div>


Ответы (1 шт):

Автор решения: BlackStar1991

Вот так решаеться ваша проблема.

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #232323;
}

.menu {
    max-height: calc(100dvh - 40px); /* ТУТ ИЗМЕНЕНИЯ */
    height: 100%;
    width: 50px;
    padding: 20px 10px;
    overflow: auto;
    background-color: #3071E7;
    position: fixed;
    display: flex;
    align-items: center;
}

.menu-content {
    height: 100%;
    width: 50px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.menu .navigation {
    flex: 1;
    width: 40px;
    margin-top: 10px;
    display: flex;
    list-style-type: none;
    flex-direction: column;
    position: relative;
}

.menu .navigation a {
    height: 30px;
    width: 30px;
}

.menu .navigation .navigation-button {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 10px;
    margin-top: 10px;
    transition: 0.2s;
    text-decoration: none;
    cursor: pointer;
    background-color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .navigation .navigation-button:first-child {
    margin-top: 0;
}

.menu .navigation .navigation-button:nth-child(2) {
    margin-top: auto;
}

.setting {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    align-content: start;
    justify-content: center;
}
.setting a {
    margin-top: 10px;
    position: relative;
}
.setting a:first-child {
    margin-top: 0;
}
.setting-active {
    height: max-content;
}
<div class="menu">
    <div class="menu-content">
        <div class="mini-logo">
            <svg width="24" height="35" viewBox="0 0 24 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="14.603" width="7.93651" height="30.1587" fill="white"/>
                <rect y="7.61719" width="8.09524" height="22.5397" fill="white"/>
                <path d="M6.98558 7.61721L10.3178 7.61721L22.6987 30.1583L14.6035 30.1583L8.09513 22.5389L6.98558 7.61721Z" fill="white"/>
            </svg>                
        </div>
        <ul class="navigation">
            <li class="navigation-button">
                <a id="note-add">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.75 13.75V6.25H16.25V13.75H23.75V16.25H16.25V23.75H13.75V16.25H6.25V13.75H13.75Z" fill="black"/>
                    </svg>
                </a>                
            </li>
            <li class="navigation-button logout">
                <a id="logout">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 27.5C8.09644 27.5 2.5 21.9035 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C19.0891 2.5 22.7196 4.46347 25.0003 7.49904L21.6136 7.49914C19.8509 5.94374 17.5356 5 15 5C9.47715 5 5 9.47715 5 15C5 20.5229 9.47715 25 15 25C17.5363 25 19.852 24.0557 21.6149 22.4997H25.0011C22.7206 25.536 19.0896 27.5 15 27.5ZM23.75 20V16.25H13.75V13.75H23.75V10L30 15L23.75 20Z" fill="black"/>
                    </svg>
                </a>                          
            </li>
            <li class="navigation-button setting">
                <a id="setting">
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.17432 21.2501C3.63401 20.3143 3.22846 19.3376 2.95166 18.3425C4.16725 17.7223 4.99965 16.4584 4.99965 15.0001C4.99965 13.543 4.1685 12.2799 2.95441 11.6591C3.51281 9.64551 4.57321 7.77021 6.08092 6.23739C7.22587 6.98008 8.73669 7.06905 9.99965 6.33988C11.2626 5.6107 11.941 4.25781 11.8702 2.89493C13.9516 2.35563 16.1059 2.37493 18.1289 2.89815C18.0594 4.25995 18.7376 5.61128 19.9996 6.33988C21.2626 7.06903 22.7734 6.98008 23.9182 6.23746C24.6416 6.9747 25.2846 7.81426 25.825 8.75014C26.3652 9.686 26.7709 10.6627 27.0476 11.6577C25.832 12.278 24.9996 13.5419 24.9996 15.0001C24.9996 16.4574 25.8307 17.7204 27.0449 18.3411C26.4865 20.3548 25.4261 22.23 23.9184 23.7629C22.7734 23.0203 21.2626 22.9313 19.9996 23.6604C18.7366 24.3895 18.0584 25.7425 18.129 27.1054C16.0477 27.6446 13.8935 27.6254 11.8704 27.1021C11.9399 25.7403 11.2616 24.389 9.99965 23.6604C8.73672 22.9313 7.22599 23.0201 6.08105 23.7628C5.35771 23.0255 4.71465 22.186 4.17432 21.2501ZM11.2496 21.4954C12.6139 22.283 13.5936 23.5283 14.0629 24.9573C14.6857 25.0165 15.3127 25.0174 15.9357 24.9593C16.4047 23.5295 17.3847 22.2834 18.7496 21.4954C20.1145 20.7073 21.6837 20.4818 23.1565 20.7904C23.5182 20.2799 23.831 19.7364 24.0911 19.1674C23.0882 18.0465 22.4996 16.5754 22.4996 15.0001C22.4996 13.4249 23.0882 11.9539 24.0911 10.833C23.961 10.5505 23.8172 10.2727 23.6599 10.0001C23.5025 9.72761 23.3337 9.46423 23.1541 9.2104C21.6821 9.51833 20.1139 9.29255 18.7496 8.50494C17.3854 7.71731 16.4057 6.47198 15.9364 5.04306C15.3136 4.9838 14.6865 4.98295 14.0636 5.04103C13.5945 6.47076 12.6145 7.71693 11.2496 8.50494C9.88475 9.29296 8.31556 9.51855 6.84285 9.20991C6.48106 9.72039 6.16829 10.2638 5.9082 10.8328C6.91101 11.9538 7.49965 13.4249 7.49965 15.0001C7.49965 16.5754 6.91104 18.0464 5.9082 19.1673C6.03834 19.4498 6.18205 19.7276 6.3394 20.0001C6.49673 20.2726 6.6655 20.536 6.84515 20.7899C8.31721 20.482 9.88547 20.7078 11.2496 21.4954ZM14.9996 18.7501C12.9286 18.7501 11.2496 17.0713 11.2496 15.0001C11.2496 12.9291 12.9286 11.2501 14.9996 11.2501C17.0707 11.2501 18.7496 12.9291 18.7496 15.0001C18.7496 17.0713 17.0707 18.7501 14.9996 18.7501ZM14.9996 16.2501C15.69 16.2501 16.2496 15.6905 16.2496 15.0001C16.2496 14.3098 15.69 13.7501 14.9996 13.7501C14.3092 13.7501 13.7496 14.3098 13.7496 15.0001C13.7496 15.6905 14.3092 16.2501 14.9996 16.2501Z" fill="black"/>
                    </svg>
                </a>
                <a>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.0012 2.5C8.09497 2.5 2.50122 8.09375 2.50122 15C2.50122 20.5313 6.07935 25.2031 11.0481 26.8594C11.6731 26.9687 11.9075 26.5938 11.9075 26.2656C11.9075 25.9688 11.8918 24.9844 11.8918 23.9375C8.75122 24.5156 7.93872 23.1719 7.68872 22.4688C7.5481 22.1094 6.93872 21 6.40747 20.7031C5.96997 20.4688 5.34497 19.8906 6.39185 19.875C7.37622 19.8594 8.07935 20.7812 8.31372 21.1562C9.43872 23.0469 11.2356 22.5156 11.9543 22.1875C12.0637 21.375 12.3918 20.8281 12.7512 20.5156C9.96997 20.2031 7.06372 19.125 7.06372 14.3438C7.06372 12.9844 7.5481 11.8594 8.34497 10.9844C8.21997 10.6719 7.78247 9.39062 8.46997 7.67187C8.46997 7.67187 9.51685 7.34375 11.9075 8.95312C12.9075 8.67187 13.97 8.53125 15.0325 8.53125C16.095 8.53125 17.1575 8.67187 18.1575 8.95312C20.5481 7.32812 21.595 7.67187 21.595 7.67187C22.2825 9.39062 21.845 10.6719 21.72 10.9844C22.5169 11.8594 23.0012 12.9688 23.0012 14.3438C23.0012 19.1406 20.0794 20.2031 17.2981 20.5156C17.7512 20.9063 18.1419 21.6563 18.1419 22.8281C18.1419 24.5 18.1262 25.8438 18.1262 26.2656C18.1262 26.5938 18.3606 26.9844 18.9856 26.8594C24.0737 25.1416 27.4999 20.3704 27.5012 15C27.5012 8.09375 21.9075 2.5 15.0012 2.5Z" fill="black"/>
                    </svg>
                </a>
                <a>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M25 15C25 20.5229 20.5229 25 15 25C9.47715 25 5 20.5229 5 15C5 9.47715 9.47715 5 15 5C20.5229 5 25 9.47715 25 15ZM15 27.5C21.9035 27.5 27.5 21.9035 27.5 15C27.5 8.09644 21.9035 2.5 15 2.5C8.09644 2.5 2.5 8.09644 2.5 15C2.5 21.9035 8.09644 27.5 15 27.5ZM15.448 11.7281C14.2321 12.2338 11.8022 13.2805 8.15825 14.8681C7.56651 15.1034 7.25655 15.3336 7.22833 15.5586C7.18064 15.9391 7.65701 16.0889 8.30572 16.2929C8.39396 16.3206 8.4854 16.3494 8.57912 16.3799C9.21735 16.5872 10.0759 16.83 10.5222 16.8396C10.927 16.8484 11.3789 16.6815 11.8778 16.3389C15.2825 14.0406 17.04 12.879 17.1504 12.854C17.2282 12.8363 17.3361 12.8141 17.4091 12.879C17.4823 12.944 17.475 13.067 17.4674 13.1C17.4201 13.3012 15.5501 15.0398 14.5824 15.9394C14.2939 16.2076 14.0126 16.4816 13.7291 16.7549C13.1363 17.3264 12.6916 17.755 13.7538 18.455C14.8305 19.1646 15.9154 19.8728 16.9655 20.6214C17.4834 20.9906 17.9487 21.3224 18.5235 21.2695C18.8576 21.2388 19.2026 20.9246 19.3778 19.9879C19.7919 17.7741 20.6059 12.9776 20.794 11.001C20.8105 10.8279 20.7897 10.6063 20.7731 10.509C20.7565 10.4117 20.7216 10.273 20.5953 10.1704C20.4454 10.0489 20.2142 10.0233 20.1109 10.0251C19.6406 10.0334 18.9194 10.2842 15.448 11.7281Z" fill="black"/>
                    </svg>
                </a>
                <a>
                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.79386 8.06661C6.06376 9.86435 5 12.3079 5 15C5 20.5229 9.47715 25 15 25C16.351 25 17.6395 24.7321 18.8151 24.2465C18.9589 23.3084 18.6435 22.4083 18.5145 22.0933C18.2275 21.3938 17.2801 20.1978 15.6986 18.5385C15.2765 18.0948 15.3036 17.7544 15.4545 16.7429L15.4719 16.6286C15.5744 15.9358 15.7464 15.5261 18.0778 15.156C19.2621 14.9682 19.5736 15.4416 20.0054 16.0971C20.0531 16.1697 20.1009 16.241 20.1498 16.3124C20.5599 16.9121 20.8638 17.0493 21.3228 17.258C21.5284 17.3513 21.785 17.4689 22.1289 17.6643C22.9439 18.13 22.9439 18.6559 22.9439 19.809V19.9398C22.9439 20.4293 22.896 20.859 22.8207 21.2324C24.1847 19.5231 25 17.3568 25 15C25 10.8761 22.5038 7.33525 18.9399 5.80603C18.2484 6.27266 17.2997 6.93407 16.9687 7.3875C16.7995 7.61922 16.5602 8.80208 15.7821 8.8997C15.5782 8.92529 15.3048 8.90736 15.015 8.88871C14.2381 8.83823 13.1752 8.77008 12.835 9.69369C12.619 10.279 12.581 11.8681 13.2799 12.6929C13.3918 12.8246 13.4134 13.0684 13.3374 13.3419C13.2375 13.701 13.0357 13.9195 12.9729 13.9646C12.8524 13.8954 12.612 13.6164 12.4492 13.4265C12.0569 12.9706 11.5676 12.4029 10.935 12.2272C10.7049 12.1635 10.4521 12.1108 10.2068 12.0592C9.5205 11.9153 8.74304 11.7517 8.5624 11.3663C8.43052 11.084 8.4311 10.6953 8.43161 10.2846C8.43161 9.764 8.43161 9.17536 8.17661 8.6032C8.07807 8.38176 7.94611 8.20557 7.79386 8.06661ZM15 27.5C8.09644 27.5 2.5 21.9035 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9035 2.5 27.5 8.09644 27.5 15C27.5 21.9035 21.9035 27.5 15 27.5Z" fill="black"/>
                    </svg>
                </a>                                                             
            </li>
        </ul>
    </div>
</div>

PS за использование !important; в приличном обществе бьют морду.

→ Ссылка