Не выходит отзывчивая верстка

Размер psd макета 1920px, при уменьшении размера экрана к моему (1600px) кнопка ломается.

html

<!-- HEADER -->
<header class="header">
    <!-- LOGO -->
    <div class="logo">
        <a href="#" class="logo__link">
            Studio
        </a>
    </div>
    <!-- NAVIGATION -->
    <nav class="nav">
        <ul class="menu">
            <li class="menu__item">
                <a href="#" class="menu__link">
                    Individuals
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    Companies
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    The Studio
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    About Us
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    Blog
                </a>
            </li>
        </ul>
    </nav>
    <!-- BUTTON -->
    <div class="header__button">
        <a href="#" class = 'button button__link'>
            Book Now
        </a>
    </div>
    <!-- SOCIAL LINK -->
    <div class="social">
        <ul class="menu">
            <li class="menu__item">
                <a href="#" class="menu__link">
                    <i class="fab fa-facebook-f"></i>
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    <i class="fab fa-instagram"></i>
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    <i class="fab fa-linkedin-in"></i>
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    <i class="fab fa-yelp"></i>
                </a>
            </li>
            <li class="menu__item">
                <a href="#" class="menu__link">
                    <i class="fab fa-google"></i>
                </a>
            </li>
        </ul>
    </div>
</header>

sass

/* ----- HEADER ----- */
.header {
   background-color: #ffffff;
   max-width: 1920px;
   padding: 22px 101px 24px 100px;
   display: flex;
   flex-direction: row;
   /* -- LOGO -- */
   .logo {
       margin-right: 8.572%; /*156px*/
       &__link {
           font-family: Tahu;
           font-size: 60px;
           color: #222222;
           text-decoration: none;
           -moz-transition: color 0.6s 0.1s ease;
           -o-transition: color 0.6s 0.1s ease;
           -webkit-transition: color 0.6s 0.1s ease;
           transition: color 0.6s 0.1s ease;
           &:hover {
               color: #755D9A;
           }
       }
   }
   /* -- NAV -- */
   .nav {
       margin-right: 31.319%; /*570px*/
       .menu {
           list-style: none;
           margin: 0;
           padding: 0;
           overflow: hidden;
           background-color: #fff;
           height: 100%;
           width: 520px;

           &__item {
               float: left;
               margin-top: 19px;
               &:not(:last-child) {
                   margin-right: 6.925%; /*36px*/
               }
           }

           &__link {
               font-family: PoppinsMedium;
               font-size: 16px;
               color: #222;
               text-decoration: none;
               -moz-transition: color 0.6s 0.1s ease;
               -o-transition: color 0.6s 0.1s ease;
               -webkit-transition: color 0.6s 0.1s ease;
               transition: color 0.6s 0.1s ease;

               &:hover {
                   color: #4285B4;
               }
           }
       }
   }
   /* -- BUTTON -- */
   &__button {
       margin-top: 17px;
       margin-right: 3.792%; /*69px*/
   }

   .button__link {
       font-family: PoppinsRegular;
       font-size: 16px;
       color: #fff;
       padding: 11px 22px;
       text-decoration: none;  
   }
   /* -- SOCIAL LINK -- */
   .social {
       margin-top: 17px;
       .menu {
           width: 152px;
           list-style: none;
           margin: 0;
           padding: 0;
           overflow: hidden;
           background-color: #fff;

           &__item {
               float: left;
               &:not(:last-child) {
                   margin-right: 13.16%; /*20px*/
               }
           }

           &__link {
               font-size: 16px;
               color: #222222;
               -moz-transition: color 0.6s 0.1s ease;
               -o-transition: color 0.6s 0.1s ease;
               -webkit-transition: color 0.6s 0.1s ease;
               transition: color 0.6s 0.1s ease;

               &:hover {
                   color: #0095B6;
               }
           }
       }
   }
}






/* -- BUTTON -- */
.button {
   background-color: #ff3c2d;
   border-radius: 5px;
   -moz-transition: background-color 0.6s 0.1s ease;
   -o-transition: background-color 0.6s 0.1s ease;
   -webkit-transition: background-color 0.6s 0.1s ease;
   transition: background-color 0.6s 0.1s ease;

   &:hover {
       background-color: #6495ED;
   }
}

Использую normalize.css. margin в процентах, остольное решил оставить в пикселях, пробовал сделать padding в пикселях, но результат получился такой же. Верстка ломается при разрешении в 1838px, правильным ли будет решение использовать breakpoint с этого разрешения?

UPD Вопрос не решен, использовал breakpoint-ы для выравнивания