Shopify 边距将横幅推离一侧

Question

我在 Shopify 中遇到了一个非常烦人的问题。我的横幅工作正常，但突然间出现了这个名为“行”的课程，并将我的横幅推到了移动设备和桌面设备的一侧。我无法让横幅正常工作，我检查了整个代码以查看是否有任何错误，但我没有，我试图寻找一个“.row”，它可能会弄乱一切，但它唯一的死锁 .row 和那是我不觉得我应该搞砸的事情，因为我不确定它做了什么。无论如何，感谢您的宝贵时间！

非常感谢任何帮助！

Problem
What I see as the issue

CSS

.bannerheadercontainer {
    width: 100vw;
    position: relative;
    top: 0px;
    left: calc(-50vw + 50%);
    display: table;
    padding: 0px;
    margin: 0px;
}
.bannercontainer {
    position: relative;
    width: 100%;
}
.bannercontainer .btnstyle {
    font-weight: bold;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-appearance: none;
    color: white;
    font-size: 15px;
    font-size: 4vw;
    border: none;
    border-radius: 0px! important;
    height: 16%;
    text-align: center;
    line-height: 0vw;
    cursor: pointer;
}
.bannercontainer .imgstyle {
    position: absolute;
}
.bannercontainer .btnstyle span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.bannercontainer .btnstyle span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.bannercontainer .btnstyle:hover span {
    padding-right: 25px;
}
.bannercontainer .btnstyle:hover span:after {
    opacity: 1;
    right: 0;
}
.bannercontainer .btnstyleDesktop {
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-appearance: none;
    color: white;
    font-weight: bold;
    font-size: 8px;
    font-size: 1.5vw;
    border: none;
    border-radius: 0px! important;
    height: 12%;
    text-align: center;
    line-height: 0vw;
    cursor: pointer;
}
.bannercontainer .btnstyleDesktop span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.bannercontainer .btnstyleDesktop span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.bannercontainer .btnstyleDesktop:hover span {
    padding-right: 25px;
}
.bannercontainer .btnstyleDesktop:hover span:after {
    opacity: 1;
    right: 0;
}

.bannerimg {
   filter: brightness(30%);
}
/*------ CSS MOBILE ONLY -----*/

@media only screen and (max-width: 599px) {
  .bannerheadercontainer {
    top: -10px;

}


    .pagetitle {
        font-size: 18px !important;
    }
    .overlaybanner {
        top: -1px;
        height: 98%;
    }
    .index-banner {
        height: 300px !important;
        background-size: 200% 100%;
        background-repeat: no-repeat;
    }
    .styc-container {
        width: 100%;
    }
    .index-gray-section-style {
        background-color: #F9F9F9;
        min-height: 390px;
        width: 100%;
    }
    .index-gray-section-connected {
        background-color: #F9F9F9;
        min-height: 390px;
        width: 100%;
    }
    }

HTML 代码

    <!----START BANNER----->
<div id="content-desktop">
<div class="bannerheadercontainer">
<img style="width: 100%;" class="bannerimg" src="https://cdn.shopify.com/s/files/1/0025/8719/7497/files/ecobanner-compressor_2048x2048.png?v=1529095445">
<div class="overlayheaderbanner"></div>
<div class="pagetitle">ECO-FRIENDLY</div>
</div>
</div>
<div id="content-mobile">
<div class="bannerheadercontainer">
<img style="width: 100%;" class="bannerimg" src="https://cdn.shopify.com/s/files/1/0025/8719/7497/files/eco-compressor_large.png?v=1529427950">
<div style="top: 0px; height: 97%;" class="overlayheaderbanner"></div>
<div class="pagetitle">ECO-FRIENDLY</div>
</div>
</div>
<!----END BANNER----->

Answer 1

在您的代码中将宽度 '100vw 更改为 100%'，它将起作用

.bannerheadercontainer { width: 100%;}