HTML,CSS 本番環境だとレイアウトが崩れてしまう

Question

前提・実現したいこと

Macbookでポートフォリオを作成していて、AWSのS3で静的ホスティングをしています。
ハンバーガーメニューとスクロールボタンの実装をしたのですが、
ローカル環境では実装できているのですが、AWSにデプロイした後確認してみると、表示ができていません。

ただ、OSがWindowsでブラウザがGooglechromeだと正常に作動ができていることは確認しています。

発生している問題・エラーメッセージ

エラーメッセージ
``````ここに言語を入力
コード

該当のソースコード

--HTMl----------------------------------------------------------------------

<div class="hamburger-menu"> <input type="checkbox" id="menu-btn-check"> <label for="menu-btn-check" class="menu-btn"><span></span></label> <div class="menu-content"> <ul> <li> <a href="#feature-section">FEATURE</a> </li> <li> <a href="#skill-section">SKILL</a> </li> <li> <a href="#about-section">ABOUT</a> </li> <li> <a href="#contact-section">CONTACT</a> </li> </ul> </div>

----CSS---------------------------------------------------------------

.menu-btn {
position: fixed;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #070707;
border-radius: 50%;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check {
display: none;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;
z-index: 80;
background-color: #070707;
transition: all 0.5s;
}
.menu-content ul {
padding: 70px 10px 0;
}
.menu-content ul li {
border-bottom: solid 1px #ffffff;
list-style: none;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
color:#ffffff;
text-decoration: none;
padding: 9px 15px 10px 0;
position: relative;
}
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}
#menu-btn-check:checked ~ .menu-content {
left: 80%;
}

ソースコード![![イメージ説明](55f1cb22f642bd9bbe8dbf0d6c3c7d9f.png)](e51bfc1072b38b64e0b67868d872b932.png)

試したこと

文字コードに違いがあるのかと考えましたが、メタタグで<meta charset="utf-8">を指定しており、
これでWindowsもMacも対応できると認識しています。

補足情報（FW/ツールのバージョンなど）

こちらのサイトを参照してます、というかほぼコピペしてます。
https://www.asobou.co.jp/blog/web/css-menu