Empty white space showing up on the right side of my full-width site

Hi all,

I have just noticed that on all my blog posts, there is an extra "space" on the right of the site (even though the site is set to full-width). No matter which blog post you click on, the horizontal scrolling bar appears and when you scroll to the right, it's just blank space outside of the actual full-width site. This happens on both desktop and mobile but only on the blog posts and not on the other normal pages.

I did some online searching and found the below code which seems to fix the empty space issue, but now my mobile header bar is fixed, and I don't want it to be fixed.

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

Is there someone who can suggest another way of getting rid of the empty space on the right or perhaps how I can adjust the code above so that it doesn't fix my header bar in mobile view?

Sample blog post page: https://unravelyourphotos.squarespace.com/the-blog/first-blog-post

Password UYP2022

Thanks so much,
Rhonda

(Update: I used this (https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/) to debug the blog post page and worked out that it's the container containing the blog post title/author name that's causing the extra empty space on the right.

But I don't know what how to fix it. 

If anyone with a bit more coding knowledge than me could shed some light, that would be amazing.)

I don't have a solution but discovered that when the following ruleset is removed the issue goes away.

section.wm-blog-banner .blog-item-wrapper {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-align: center
}

19 minutes ago, creedon said:

I don't have a solution but discovered that when the following ruleset is remove the issue goes away.

section.wm-blog-banner .blog-item-wrapper {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-align: center
}

 

Thanks @creedon!

I've reduced the width to 80% and that seems to have resolved the issue.

Appreciate your input and help.