HTML、CSSで右側だけpaddingがきかない

前提・実現したいこと

現在HTMLCSSでWEBサイトを作成しておりヘッダー部分のpadding右側だけが効きません
header-innerにpaddingを5rem入れて、右側にも5rem入ると思ったのですが、はいりません。
色をつけて試して、グレーの右側にpaddingを入れたいです。

コード

<!doctype html> <html lang="ja"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/reset.css">
<!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
<meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的「和」の息づく空間で、至極のひとときをお過ごしください。">
<meta name="robots" content="noindex">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="img/logo01.png" >
<title>石井花壇 | 温海温泉旅館【公式サイト】</title>

</head> <body> <div class="wrap"> <header class="header"> <div class="header-inner"> <div class="header-logo"> <h1><a href="#"><img src="img/top-header-logo.png" alt="石井花壇のロゴとサイト名"></a></h1> </div> <nav> <ul id="page-link" class="header-nav"> <li class="header-nav-item"><a href="#">お部屋</a></li> <li class="header-nav-item"><a href="#">お料理</a></li> <li class="header-nav-item"><a href="#">温泉</a></li> <li class="header-calender"> <a class="header-reservation" href="#"> <img src="img/calender-icon.png" alt="カレンダーのロゴ画像"> <span>宿泊予約</span> </a> </li> </ul> </nav> </div> </header> </div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.0/swiper-bundle.min.js" integrity="sha512-VfcksjYXPZW36rsAGxeRGdB0Kp/htJF9jY5nlofHtRtswIB+scY9sbCJ5FdpdqceRRkpFfHZ3a9AHuoL4zjG5Q==" crossorigin="anonymous" defter></script>
<script src="main.js"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> -->

</body> </html>

コード

@charset "utf-8";

$sp: 767px; // スマホ表示
$tab: 1024px; //タブレット表示

@mixin sp {
@media (max-width: ($sp)) {
@content;
}
}

@mixin tab {
@media (max-width: ($tab)) {
@content;
}
}

// 共通

body {
font-family: “Times New Roman”, “游明朝”, “Yu Mincho”, “游明朝体”, “YuMincho”,
“ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, “HiraMinProN-W3”, “HGS明朝E”,
“ＭＳＰ明朝”, “MS PMincho”, serif;
width: 100%;
color: #fff;
}

a {
color: #fff;
text-decoration: none;
}

img {
height: auto;
max-width: 100%;
}

li {
list-style: none;
}

.wrap {
overflow: hidden;
}

// ヘッダーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

.header {
width: 100%;
background-color: skyblue;

&-inner {
    width: 100%;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 5rem;
}

&-logo {
    align-items: center;
    margin-right: 2rem;
}

nav {
    width: 100%;
}

&-nav {
    // display: flex;
    align-items: center;
    width: 100%;
    background-color: grey;

    @include sp {
        display: none;
    }

    &-item + &-item{
        margin-left: 30px;
    }
}

&-calender {
    margin-left: auto;
    padding: 0.8rem 1.8rem;
    // background-color: #978F10;
    width: 100px;
    max-width: 100%;
}

}