移动端div元素margin属性不生效但桌面端正常的原因咨询

我最近在给一个年头有点久的网站做修改，把原来的静态图片换成轮播组件，桌面端显示完全正常，但刚发现用手机打开同一个页面时，轮播区域的对齐就出问题了。

我试过用margin: auto和margin-left: 20px来调整位置，甚至加了!important强制生效，可在移动端就是看不到任何效果。这里要特别说明：这个移动端加载的是桌面版的网站代码，完全没做移动端适配（这块我之后会专门处理），也从来没用到@media媒体查询，所以我实在搞不懂——明明桌面端能正常识别margin属性，到了移动端就失效了？

左边是桌面端的显示效果，右边是我手机上的截图（轮播区域明显错位）。

下面是我的代码，麻烦帮我看看问题出在哪：

CSS代码 #

/* MIDDLERIGHT MIDDLERIGHT MIDDLERIGHT MIDDLERIGHT */
#middle .right {
    width: 342px;
    margin-left: 8px;
    height: 300px;
    float: left;
}
#middle .right .top {
    width: 344px;
    height: 50px;
    margin: 0px;
    background: #000;
    float: left;
}
#middle .right .top p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    text-decoration: none;
    margin: 15px 0px 0px 20px;
}
#middle .right .mid {
    height: 245px;
    width: 342px;
    background: #fff;
    float: left;
    border-width: 1px;
    border-style: dotted;
    border-color: #000;
}
#middle .right .bottomline {
    width: 342px;
}
/* container for slideshow*/
#middle .right .mid .slideshow {
    max-width: 300px;
    max-height: 130px;
    margin: auto;
    margin-top: 10px;
    justify-items: center;
}
#middle .right .mid .slideshow .slidesImg img {
    max-height: 130px;
    object-fit: cover;
}
#middle .right .mid .slideshow .prevBttn, .nextBttn {
    cursor: pointer;
    position: absolute;
    margin-top: -80px;
    background-color: rgba(0,0,0,0.03);
    padding: 5px;
}
#middle .right .mid .slideshow .prevBttn img, .nextBttn img{
    width: 15px;
    height: 15px;
}
#middle .right .mid .slideshow .prevBttn {
    margin-left: -14px;
}
#middle .right .mid .slideshow .nextBttn {
    margin-left: 289px;
}
#middle .right .mid .slideshow .prevBttn:hover, .nextBttn:hover {
    background-color: rgba(0,0,0,0.1);
}
#middle .right .mid .dotContainer {
    text-align: center
}
#middle .right .mid .dotContainer .dot {
    cursor: pointer;
    height: 7px;
    width: 7px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.5s ease;
}
#middle .right .mid .dotContainer .dot:hover, #middle .right .mid .dotContainer .active {
    background-color: rgb(0,0,0);
}
/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1s;
}
@keyframes fade {
    from { opacity: .4 }
    to { opacity: 1 }
}
#middle .right .mid .image1 {
    height: 130px;
    width: 280px;
    float: left;
    margin-left: 30px;
    margin-top: 10px;
}
#middle .right .mid .image1 img{
    width: 100%;
}
#middle .right .mid .text1 .newsDesc {
    height: 38px;
    width: 320px;
    float: left;
    margin-left: 15px;
    margin-top: 10px;
}
#middle .right .mid .text1 p {
    font-family: 'Myriad Roman', sans-serif;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    line-height: 15px;
    color: #000;
}
#middle .right .mid .readmore1 a {
    height: 25px;
    width: 110px;
    background: url('images/readmore.png') no-repeat;
    float: right;
    margin-top: 20px;
    margin-right: 10px;
}
#middle .right .mid .readmore1 a:hover {
    background: url('images/readmorehover.png') no-repeat;
    font-weight: none;
}
#middle .right .mid .readmore1 p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: normal;
    color: white;
    text-align: center;
    text-decoration: none;
    margin-top: 2px;
}
#middle .right .bottomline {
    height: 20px;
    margin: 0px;
    background: #;
    float: left;
}
#btmspacer {
    width: 800px;
    height: 23px;
    float: left;
    margin-top: 30px;
    margin-left: 30px;
}

HTML代码 #

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Home</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="style_home.css" />
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <!--header portion stuff including banner and nav bar-->
        </div>
        <!-- MIDDLE MIDDLE MIDDLE MIDDLE -->
        <div id="middle">
            <!-- LEFT -->
            <div class="left">
                <!--stuffs on the left container-->
            </div>
            <!-- LEFT -->
            <!-- RIGHT -->
            <div class="right">
                <div class="top">
                    <p>News</p>
                </div>
                <div class="mid">
                    <div class="slideshow">
                        <script>
                            setInterval(function () {
                                plusSlides(1)
                            }, 3000);
                        </script>
                        <div class="slidesImg fade">
                            <img src="https://i.postimg.cc/bwkpNpM7/semicon-india-2025.png">
                        </div>
                        <div class="slidesImg fade">
                            <img src="https://i.postimg.cc/CxqLB..."> <!-- 原代码内容截断 -->
                        </div>
                    </div>
                    <!-- 原页面中还有text1、readmore1等元素，此处省略部分未完整给出的代码 -->
                </div>
                <div class="bottomline"></div>
            </div>
            <!-- RIGHT -->
        </div>
        <div id="btmspacer"></div>
    </div>
</body>
</html>

麻烦帮我分析下，为什么桌面端能正常工作的margin属性，到了移动端就不生效了？

内容来源于stack exchange