How do I make everything centered when page is zoomed out?

Question

I've just made the switch from Bootstrap to Semantic UI and having some problems with the grid system.

Using Bootstrap I could set a max-width of 1600px so that the content wouldn't disappear to the sides when someone zooms out to ridiculous levels (no one really would and still expect the page to work but I still want to cover my bases). With Semantic, there are two outcomes:

1) With a max-width the entire page is left-aligned and cut off at 1600px.

2) Without a max-width things are are spaced out waaay too much (always connected to the edges), and the header content disappears to the left.

If you visit Semantic UI's home page and zoom out, you can see that the page is centered along with the header content (not the header background), and I suppose that they use their own framework for their page so it has to be possible somehow.

How do I achieve this?

Answer 1

Add margin: 0 auto;. Example:

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}