Edges of site are overflowing on mobile view

Hi Squarespace community - please help!

When I scroll my website on mobile - the edges to the right overflow.

(please see the video below to see what I mean)
This happens on both Chrome and Safari. As well as on my iPhone 13 + my iPad 11.

Is there some code that I need to add to remove this effect so that it will just scroll normally down with no edges?

Thanks very much!!!

Laura

Can you share your website URL and the code you are using?

HI Ziggy!

Yes! Here is the URL - www.lauraabate.com

+ this is the code I currently have in my Custom CSS

(a lot of it was just copy/pasted that I found online, I'm not familiar with coding that much)

/* center logo */

@media screen and (max-width:640px) {
.header {
    height:70px;
    padding-top: 15px;
}
}

body {
  overflow-x: hidden !important;
}

//smooth scrolling//
html { scroll-behavior: smooth!important; }

//header nav hover//
.header-nav-folder-content a:hover { 
  letter-spacing: 2.0px;}
.header-nav a:hover {letter-spacing: 2.0px}

//mardown faqs and what's included blocks//

.sqs-block-markdown {
h2 {
font-size: 20px !important;
font-weight: 500 !important;
margin-top: 10px !important;
padding: 15px 15px !important;
margin-bottom: 0 !important;
background: #ffffff !important;
text-align: center !important;
}
}

//Newsreader Font//
@font-face {
font-family: 'Newsreader';  
src: url(https://static1.squarespace.com/static/63582e6b9ce316797185bc3c/t/6362d2eb165c4a026278cc4e/1667420907715/Newsreader-ExtraLight.otf), url(https://static1.squarespace.com/static/63582e6b9ce316797185bc3c/t/6362d3124257003aea91c1f9/1667420946688/Newsreader-ExtraLight.woff), url(https://static1.squarespace.com/static/63582e6b9ce316797185bc3c/t/6362d3170d0c177921095660/1667420951367/Newsreader-ExtraLight.woff2);
}

h1 {
  font-family:'Newsreader' !important
}

h2 {
  font-family:'Newsreader' !important
}

h3 {
  font-family:'Newsreader' !important
}

//Instagram Footer//
section[data-section-id="635833c4cd095bc402b2d43a"]{
.content-wrapper { 
  padding-top:0!important; 
  padding-bottom:0!important; 
  padding-left:0!important; 
  padding-right:0!important; 
  overflow-x:hidden!important;
  max-width: 100%!important; 
}
}

//Custom Fonts//

.blog-basic-grid--meta * {
    font-family: 'sofia-pro' !important;
}

//blog-tags//
.blog-meta-item--tags {
    display: none;
}

//marquee//
@keyframes moveLeft {
  from { transform: translateX(0%) } /**change value to -20% as needed*/

  to { transform: translateX(-40%) }
}

.marquee {
  display: flex;
  position: relative;
  animation: moveLeft 10s linear infinite;
}

.track{
  font-weight:bolder;
  letter-spacing:0.1em;
  white-space: nowrap;
  min-width: 100%;
  line-height:1em;
  text-align: center;
}

.dark.page-section {
 min-height:initial !important;
 overflow-x: hidden !important;

 .content-wrapper{
  padding-top:15px !important;
  padding-bottom:15px !important;
 }
 .sqs-layout:not(.sqs-editing)>.sqs-row:first-child>[class*=sqs-col]:first-child>.sqs-block:last-child {
    padding-top:0px !important;
    padding-bottom:0px !important;
  }
}

//mobile-navigation//
.header-menu .header-menu-bg{
background-image:url(https://static1.squarespace.com/static/607eeb8d1b997d00c33dc786/t/60901a5be3965a794965b21f/1620056667517/mobile-nav.jpg);
background-size:cover;}

//buttons same size//
section[data-section-id="61704902efb292037918559a"]{
@media only screen and (max-width:767px) { .sqs-block-button-element {width: 80%}}
}

Thank you!

If you temporarily remove all of the CSS does issue resolve itself?

Yes! What can I do now that I know this? 🙂

I slowly added back different sections of the code to test.

It's when I added in this piece that the problem resurfaced. (it's the piece of the website that is the marquee where the text is scrolling and says "come say hi on instagram") 

//marquee//
@keyframes moveLeft {
  from { transform: translateX(0%) } /**change value to -20% as needed*/

  to { transform: translateX(-40%) }
}

.marquee {
  display: flex;
  position: relative;
  animation: moveLeft 10s linear infinite;
}
.track{
  font-weight:bolder;
  letter-spacing:0.1em;
  white-space: nowrap;
  min-width: 100%;
  line-height:1em;
  text-align: center;
}

.dark.page-section {
 min-height:initial !important;
 overflow-x: hidden !important;

 .content-wrapper{
  padding-top:15px !important;
  padding-bottom:15px !important;
 }
 .sqs-layout:not(.sqs-editing)>.sqs-row:first-child>[class*=sqs-col]:first-child>.sqs-block:last-child {
    padding-top:0px !important;
    padding-bottom:0px !important;
  }
}

Do you happen to see where I can fix this?

Thank you!!

6 hours ago, iamlauraabate said:

I slowly added back different sections of the code to test.

That's the perfect thing to do!

What is the code causing a problem trying to do?

That worked! Thank you both so much @Ziggy @creedon!!

The Scrolling block option didn't exist at the time I had found custom CSS for that scrolling marquee. It used to work fine so it's weird that it changed over time.

Such a simple fix when you know the issue hahah.

Appreciate your time! 😊

2 hours ago, iamlauraabate said:

It used to work fine so it's weird that it changed over time.

Unfortunately custom code tends to break over time. It's the nature of the beast.

Without a before and after there is no way to know what changed that caused the issue.