Breite des Content-Bereichs größer

@media (max-width: 1024px)
.main .layoutBoundary {
    padding: 0px;
}

Normal gibt es dort 10px padding und mit 0px sollte Inhalt bis zum rand gehen.

-edit-

.main hinzugefügt damit die anderen .layoutBoundary nicht betroffen sind.

.layoutBoundary hat bei dir ein Padding von 10 Pixeln zu den Seiten. Dadurch gibt es am Rand eben einen Rand von 10 Pixeln:

@media (max-width: 1024px) {
    .layoutBoundary {
        padding: 0 10px;
    }
}

Für die Boxen .sidebar hast du zusätzlich folgende Anweisung drin:

@media (max-width: 1024px) {
    .sidebar {
        margin: 0 -10px;
    }
}

Das -10px gleicht das mit dem Rand wieder aus und schiebt das komplett an den Rand des Browsers. 10 Pixel Rand minus 10 Pixel = 0 Pixel. Für den Content hast du diese Anweisung aber nicht drin. Da gibt es also weiterhin den Rand.

Wenn du den Rand beim Content ebenfalls weg haben willst, kannst du entweder...

1. das padding von .layoutBoundary und das margin von .sidebar beides auf 0 setzen

...oder alternativ...

2. für den Content das selbe machen wie für die Sidebar:

@media (max-width: 1024px) {
    .content {
        margin: 0 -10px;
    }
}

Edit:

Quote from Mahiro

Code

@media (max-width: 1024px)
    .layoutBoundary {
        padding: 0px;
    }

Normal gibt es dort 10px padding und mit 0px sollte Inhalt bis zum rand gehen.

Dann wäre seine Sidebar aber -10 Pixel nach außen verschoben und deshalb am Rand abgeschnitten. Das müsste er dann halt auch anpassen.

Viele Wege führen nach Rom.