Help with formatting issue CSS

[jamiegaskell89]

Hello,

I was hoping someone might be able to help with a formatting issue I have. Basically when I decrease the size of the window, its possible to scroll across the body of the site which leaves a blank bar to the right hand side of the page. The nav bar seems fine, and I have no issues when its full screen or on a mobile device. The issue just comes up between a specific range of window sizes. I know my CSS is a bit of a mess, I’m currently trying to clear it up a bit. I’ve copied my codepen below and added a picture. Any ideas? Thanks!

https://codepen.io/jamiegaskell89/pen/poEJLvv

[jsdisco]

I guess the issue is here:

@media (min-width: 1250px) {
  
  #project-grid {
    display: grid;
    grid-template-columns: 700px 700px;
    justify-content: center;
  }
}

Two columns with 700px each is 1400px. Obviously doesn’t fit in a page that’s 1250px wide.

[iHassan-NG]

@media (min-width: 1250px) {
  
  #project-grid {
    display: grid;
    grid-template-columns: 700px 700px;
    justify-content: center;
  }
}`you have 3 @media selectors, the last one is the one above and it's the one overriding all others according following css rules`

[jamiegaskell89]

Thanks both, hugely appreciated. I’ll look into this later. Then I need to clean up my code!