为什么GitHub Pages更改我的按钮的格式？

Question

我正在尝试托管一个使用GitHub Pages创建的网站。我包含一个按钮，该按钮将用户带到MailChimp电子邮件列表注册表单。当我在本地打开HTML文件时，一切看起来都像我想要的样子（对中和四舍五入）。但是，在GitHub Pages上查看时，该按钮似乎未正确引用CSS文件，并且还浮动在屏幕的左侧。

https://gyazo.com/e0135aabf17c1bff674ef6f0b24cf742

https://gyazo.com/2d21fe34c9a9024917b088936f58e257

HTML：

<!-- MailChimp -->
<div id="mc_embed_signup">
    <form action="https://facebook.us14.list-manage.com/subscribe/post?u=f10d5f8c984b9e327a2ca8084&amp;id=921f2a892d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
                    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;" aria-hidden="true">
                <input type="text" name="b_f10d5f8c984b9e327a2ca8084_921f2a892d" tabindex="-1" value="">
            </div>
            <div class="clear">
                <input type="submit" value="Sign up for our mailing list" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-outline-white btn-lg">
            </div>
        </div>
    </form>
</div>
<!--Mailchimp-->    

CSS：

.btn-outline-white {
    margin-top: 20px;
    text-shadow: 1px 2px 2px black;
    border-radius: 40px;
}

考虑到我计算机上的实际文件与GitHub存储库中的实际文件相同，有人可以解释造成这种情况的原因吗？谢谢。