-1
.allBooks {
  gap: 30px;
  align-items: center;
  max-width: 100vw;
  height: 100vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.nav {
  flex-grow: 0;
}

In regular HTML and css, I could center the content in a container by setting the max-width to about 1200px,height to 100vh, top and bottom margin to 0, and left and right to auto. However my screen size is bigger now(1920px) Max-width of 1200px doesnt look good. What is the best way to center the content?

medOnline5
  • 73
  • 1
  • 5

1 Answers1

-1

You can achieve your solution using only display:flex and align-items: center; justify-content: center

I think the issue comes from the parent element not being defined properly.

When dealing with a responsive design, I always try to work my way from the top to the bottom.

Check the html element first then the body and then the children. This way you are sure that by using relative units, you will have the correct responsive behaviour when switching displays.

Here's a work i made a while ago showcasing responsive with relative units.

Charif Hassan
  • 11
  • 4