How to deal with centered content on a layout with a sidebar?

Question

I have the following view in my application, where a list of cards containing some information and a button is present. In order to prevent uneeded space within the cards and make the button closer to the displayed data, I've limited their width on large devices to 60em. But now I think something is wrong designwise. As you can see, the centered content is not aligned with anything else within the view, and it looks uncanny.

I accept any suggestions.

Answer 1

Perhaps centering the content to the window or the view area is not the best option.

What I usually do in similar cases is:

• Cards with minimum-width and maximum-width, depending on the content
• Fixed left and right margin

Trying to find useful measures for the maximum number of screen widths, and only modifying them for small screens, mobiles, or tablets.

The result is not exactly centered but remains consistent across the page.

jsfiddle