使用填充时，标题中的按钮顶部会切断：20px;

Question

我正在我的标题中构建一个按钮，以便人们可以点击它，然后将它们转换为模态以填写联系信息。它会切断按钮，如上图所示。

我的HTML：

<header class="site-header">
    <div class="wrapper">
        <div class="site-header__logo">
            <div class="icon site-header__logo__graphic icon--clear"></div>
        </div>

        <div class="site-header__menu-icon">
            <div class="site-header__menu-icon__middle"></div>
        </div>

        <div class="site-header__menu-content">
            <div class="site-header__btn-container">
                <a href="#" class="site-header__btn">Request A Demo</a>
            </div>
            <nav class="primary-nav primary-nav__pull-right">
                <ul>
                    .....
                </ul>
            </nav>
        </div>
    </div>
</header>

我的CSS

.site-header {
    padding-top: 20px;
    padding-bottom: 20px;
    position: absolute;
    width: 100%;
    z-index: 2;
    background-color: rgb(207, 206, 206, .5);

    &__btn {
        background-color: $mainOrange;
        color: #fff;
        font-size: 1.5rem;
        padding: 5px 10px 5px 10px;
        border-radius: 5px;        
    }

    &__btn-container {
        float: right;

    }
}

当我删除padding时，标题会从顶部刷新。当我将padding更改为margin时，它会从顶部向下推动标题。

关于如何整个按钮的任何想法？