# 4.2: Facts CSS

## Style the `<h3>`

Back to the `style.css` file. Let's make all `<h3>` tags on the page dark blue with centered text. Right now we only have the "Facts" h3, but later we'll add more h3's for the Lorem and Favorites sections. Likewise, let's add some padding to ALL of the sections on the page.

```css
/* Facts Section */

h3 {
  color: #000064;
  font-size: 48px;
  text-align: center;
  margin: 0;
  margin-bottom: 16px;
}


section {
  padding: 48px;
  padding-bottom: 72px;
}
```

![H3 and Section CSS](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o-xiPFBVF-L03qZ%2F4.2-h3-section-css.png?generation=1524162327800888\&alt=media)

## Resize the image

Getting that giant image sized correctly is pretty high up on the priority list - let's force the image to be 200px wide... and allow the height to be set automatically based on the image dimensions.

```css
img {
  width: 200px;
  height: auto;
}
```

![Resize Image](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o1FD2FcmHKzVytZ%2F4.2-resize-image.png?generation=1524162333267158\&alt=media)

![Resize Image Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o1fczr1_kC2j4aY%2F4.2-resize-image-result.png?generation=1524162338227558\&alt=media)

## Center the content

Centering items can be difficult with CSS - very difficult. One powerful option for doing this is "flex" display (*formerly referred to as "flexbox"*)... Let's use that now to center everything in our `<div>`.

```css
#centerThis {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

![Flex](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o3LHZSvQYdLE8f5%2F4.2-flex.png?generation=1524162338785356\&alt=media)

![Flex Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o3rG072UGyENDYB%2F4.2-flex-result.png?generation=1524162328367771\&alt=media)

## Styling the Unordered List

Lastly, let's do some minor styling on the unordered list and its list-items... right now everything seems pretty squished together, let's add some margins and padding.

```css
ul {
  margin-left: 32px;
}
li {
  padding: 5px;
  font-family: Helvetica, sans-serif;
}
```

![List Styled](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o5BhCqb5jac9ouP%2F4.2-list-styled.png?generation=1524162333388310\&alt=media)

![List Styled Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o5n9WxQePFep2Rw%2F4.2-list-styled-result.png?generation=1524162330734861\&alt=media)

## Next Section

Let's move on to the Lorem portion of the website. Go to [5.1: Lorem](https://eleven-fifty-academy.gitbook.io/intro-to-coding/part-5-lorem/5.1-lorem-html).