The issue occurs because the (.content div) is aligned to the left while the .card-layout wraps, making it appear off-center when the cards stack.

To fix this, wrap (.content) inside a flex container and center it using align-items: center; while keeping the header left-aligned inside (.content). Additionally, set align-self: center; on (.card-layout) to maintain centering when wrapping.

Alternatively, use max-width and margin: auto; on (.content) to ensure it remains centered while allowing the header to stay aligned to the left.