# Website does not center vertically **URL:** \ **Category:** General\ **Created:** [June 12, 2017, 1:26pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489 "2017-06-12T13:26:29Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![3rfaan](https://avatars.discourse-cdn.com/v4/letter/3/ac91a4/32.png) [@3rfaan](https://forum.freecodecamp.org/u/3rfaan)\ **Post date:** [June 12, 2017, 1:26pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/1 "2017-06-12T13:26:29Z")
Hey, just building a tribute page but my problem is that the website does not center vertically when using flexbox. Can someone pls explain? Here is the code: [https://codepen.io/3rfaan/pen/VWaomj](https://codepen.io/3rfaan/pen/VWaomj) ---
**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\ **Post date:** [June 12, 2017, 1:41pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/2 "2017-06-12T13:41:09Z")
You need to set the `height` of `html`, `body` and the flex container to 100%. Also replace `align-content` with `align-items`. ---
**Author:** ![3rfaan](https://avatars.discourse-cdn.com/v4/letter/3/ac91a4/32.png) [@3rfaan](https://forum.freecodecamp.org/u/3rfaan)\ **Post date:** [June 12, 2017, 1:44pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/3 "2017-06-12T13:44:31Z")
This worked, thank you! Just out of curiosity: Why do we need to set the height of the mentioned selectors but the width we can leave unspecified and yet it centers? ---
**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\ **Post date:** [June 12, 2017, 2:00pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/4 "2017-06-12T14:00:03Z")
I think the horizontal centering is due to bootstrap’s `.container` class. Try removing all the 100% heights and the flex stuff and just add a red background to `.container`. Meanwhile, setting those elements’ heights to 100% and adding the flex stuff do center the content vertically. ---
**Author:** ![3rfaan](https://avatars.discourse-cdn.com/v4/letter/3/ac91a4/32.png) [@3rfaan](https://forum.freecodecamp.org/u/3rfaan)\ **Post date:** [June 12, 2017, 2:17pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/5 "2017-06-12T14:17:03Z")
You are right again. Now to test that I simply deactivated Bootstrap. Now the content aligns horizontally but not vertically. I set the width of html and body elements to 100% and the content width to 70%. Saved it to CodePen above. ---
**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\ **Post date:** [June 12, 2017, 2:31pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/6 "2017-06-12T14:31:17Z")
The `width: 100%;` adds a horizontal scrollbar. It’s not really necessary. You also have a typo in `justify-content`. You have two options: - Make the `body` the flex container. Then remove `.container`'s height. - Retain the flex stuff in `.container`, then move the `width: 70%` to its direct child element (the `.content` element). ---
**Author:** ![3rfaan](https://avatars.discourse-cdn.com/v4/letter/3/ac91a4/32.png) [@3rfaan](https://forum.freecodecamp.org/u/3rfaan)\ **Post date:** [June 12, 2017, 2:43pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/7 "2017-06-12T14:43:36Z")
Worked perfectly. Thanks alot mate! 😃 ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [January 17, 2021, 8:56pm UTC](https://forum.freecodecamp.org/t/website-does-not-center-vertically/126489/8 "2021-01-17T20:56:05Z")
Closed on January 17, 2021, 8:56pm UTC