How to remove this right margin in React?

[few3231]

I have this right margin, it’s from designed snippet, it works properly in plain html, but when I inserted it in React app, as component, it seems to have right margin which I can’t get rid of, because it doesn’t even show as margin at all.

NavBar and Footer components don’t influence it (I tried with them removed, but this still act the same).

It works nicely on mobile (below 600px), but once it stretches longer, it gets that white thing.
And there’s again breakpoint at 800 or smth, when again it stretches from beginning (different layout)

login component is at ‘login’ button click (‘/login’ route)
repo

relevant code for login component and css style

[m_hutley]

Your Media queries specify a Max-Width on the Container class:

@media (min-width: 640px) {
    .container {
        max-width:640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width:768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width:1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width:1280px
    }
}

@media (min-width: 1536px) {
    .container {
        max-width:1536px
    }
}

So, for example, when the window is exactly 1280px wide, the container will be 1280px wide. But from 1281px to 1535px the container will…still be 1280px wide.

[PaulOB]

As @m_hutley said those media queries are not doing anything useful.

You could get rid of them all or just add this afterwards instead.

.container{
max-width:none
}

That assumes that you don’t use container anywhere else otherwise you will need a custom class on that element for this page.

It looks to me as though the container was supposed to be a page wrapper to hold everything to stop stuff getting too wide but you have coded the footer as 100% of the viewport so the content above also needs to be 100% which is why the max-widths were breaking the look.