html - 为什么 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 存储库是相同的，谁能解释可能导致这种情况的原因？谢谢你。

标签： htmlcssgithub-pagesmailchimp