Shopify Margin Pushing Banner off Side - html

Question

Im having a very annoying problem in Shopify. My banners were working fine but all of a sudden this class called "row" came up and is pushing my banner off to the side on both mobile and desktop. I cant get my banners to work correctly, I went through my entire code to see if I had any errors and I do not, I tried to look for a ".row" that could be messing up everything but its only gridlock .row and that is something I dont feel I should be messing with, as im not sure what it does. Anyhow, thank you for your time!
Any help is greatly appreciated!
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 CODE
<!----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

Change width '100vw to 100%' in your code, it will work
.bannerheadercontainer { width: 100%;}