我正在使用visual studio为一个类项目创建一个虚构的网站，我的网站准确地显示了我希望它在本地和通过visual studio显示的方式，但当我实时上传到byethost时，CSS不能正常显示/浏览器之间存在差异（我知道这是正常的）。其中一个主要问题是图像在菜单和预订页面上的显示方式。在本地和VS中，我的图像在滚动条中水平显示，但在我的live站点上，它们在垂直方向上堆叠显示，就像没有应用CSS一样。

我正在尝试诊断为什么我的一些CSS不能显示在实时站点上，并找到一个解决方案来使我的页面在所有浏览器上都能正确阅读。有什么提示吗？我会附上我的HTML和CSS。下面是我的草稿网站的链接:(http://www.townfinedining.byethost13.com/index.html)

    <section class="main">
                    <div class="menu_imagebox">
                            <div class="scroll">
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/salmon2.jpg" loading="lazy" class="responsive"
                                                            alt="Salmon plated like starfish">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/chicken2.jpg" loading="lazy" class="responsive"
                                                            alt="Red pepper on roasted chicken">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/app2jpg.jpg" loading="lazy" class="responsive"
                                                            alt="edamame, dumplings, chicken karagge">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/juicy.jpg" loading="lazy" class="responsive"
                                                            alt="sliced wagyu beef held by chopsticks">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/friedrice.jpg" loading="lazy"
                                                            class="responsive" alt="bowl of fried rice with egg on top">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/springrolls.jpg" loading="lazy"
                                                            class="responsive" alt="plate of springrolls">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/pho.jpg" loading="lazy" class="responsive"
                                                            alt="close up bowl of pho with sriracha sauce on top">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/sushi_boat.jpg" loading="lazy"
                                                            class="responsive" alt="two decorite mini boats filled with coconut shell and sushi on top">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/dumpling.jpg" loading="lazy" class="responsive"
                                                            alt="bowl of bright orange dumpling soup">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/wagyu2.jpg" loading="lazy" class="responsive"
                                                            alt="pan of sliced wagyu beef surrounded by wasabi">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/chicken.jpg" loading="lazy" class="responsive"
                                                            alt="chicken kebabs and peppers">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/app.jpg" loading="lazy" class="responsive"
                                                            alt="takoyaki fried octopus ball appetizer">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/sushiball.jpg" loading="lazy"
                                                            class="responsive" alt="plate of crafted sushi balls">
                                            </div>

                                    </div>
                            </div>
                    </div>
            </section>

CSS:

    <section class="main">
                    <div class="menu_imagebox">
                            <div class="scroll">
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/salmon2.jpg" loading="lazy" class="responsive"
                                                            alt="Salmon plated like starfish">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/chicken2.jpg" loading="lazy" class="responsive"
                                                            alt="Red pepper on roasted chicken">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/app2jpg.jpg" loading="lazy" class="responsive"
                                                            alt="edamame, dumplings, chicken karagge">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/juicy.jpg" loading="lazy" class="responsive"
                                                            alt="sliced wagyu beef held by chopsticks">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/friedrice.jpg" loading="lazy"
                                                            class="responsive" alt="bowl of fried rice with egg on top">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/springrolls.jpg" loading="lazy"
                                                            class="responsive" alt="plate of springrolls">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/pho.jpg" loading="lazy" class="responsive"
                                                            alt="close up bowl of pho with sriracha sauce on top">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/sushi_boat.jpg" loading="lazy"
                                                            class="responsive" alt="two decorite mini boats filled with coconut shell and sushi on top">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/dumpling.jpg" loading="lazy" class="responsive"
                                                            alt="bowl of bright orange dumpling soup">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/wagyu2.jpg" loading="lazy" class="responsive"
                                                            alt="pan of sliced wagyu beef surrounded by wasabi">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/chicken.jpg" loading="lazy" class="responsive"
                                                            alt="chicken kebabs and peppers">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/app.jpg" loading="lazy" class="responsive"
                                                            alt="takoyaki fried octopus ball appetizer">
                                            </div>

                                    </div>
                                    <div class="card">
                                            <div class="card-image">
                                                    <img src="images/sushiball.jpg" loading="lazy"
                                                            class="responsive" alt="plate of crafted sushi balls">
                                            </div>

                                    </div>
                            </div>
                    </div>
            </section>

顺晟科技：