Our styles are coming along nicely, and we'll continue to work on the center part of the page now.

Before we move on, I want to make a small change to the right navigation buttons. I want to keep the font-size to 0.8em.

That's done, and we'll start with styling our content. I'm going to start off with a top margin of 25%, and setting a value of "auto" to margin-left and margin-right to keep our content centered. We'll keep the width to about 50% of the container, and also add a small padding on all sides.

#content {
  margin-top: 25%;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  padding: 10px;
}

If you look at the output, you can see that the image got moved down and the entire area including the SVG images got scaled down. This is because SVGs are treated more like <div> tags, rather than as actual images.

Next, we'll work on our #banner, where we'll set a value of "block" to the display attribute. Then, we want it to be centered, so we'll set an "auto" value to the left and right margins. Next, we'll shrink the width further.

#content #banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

The output looks better now.

Next, we'll get to the marketing content. For this, we'll give a top margin, align all the text in the center and have white as the text color.

#content #marketing-content {
  margin-top: 20px;
  text-align: center;
  color: white;
}

For #line-1, let's have a font-size of 1.5em, so it's visible on the page. We'll also have a small margin at the bottom. For #line-2, we'll keep the font size a little smaller and there'll be no margins.

#line-1 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

#line-2 {
  font-size: 0.9em;
}

If you refresh the browser, I think it gives a lot better look and feel.

Next, we'll move to the buttons. For the buttons ID, we'll align the text to the center, and have a top margin of 40px.

#buttons {
  text-align: center;
  margin-top: 40px;
}

For the button class, we'll add some left and right margin. Then, we'll add a background color of black and a text color white, along with a padding of 10px at the top and bottom, and 24px on the left and right. Finally, we'll set a max-width of 30px and a border of 1px that is solid and transparent. If it looks weird, don't worry, as it'll make sense later.

.button {
  margin-left: 20px;
  margin-right: 20px;
  background-color: black;
  color: white;
  padding: 10px 24px 10px 24px;
  max-width: 30px;
  border: 1px solid transparent;
}

The output looks like this now:

We're not done yet. Moving on, we'll style the links on buttons now. We'll have no text decoration, and a font size of 0.9em.

.button a {
  text-decoration: none;
  font-size: 0.9em;
}

The output hasn't changed, and that's because I styled the class instead of the ID. So, it should be like this:

#buttons a {
  text-decoration: none;
  font-size: 0.9em;
}

The text on the buttons look much better now.

The next thing is the hover effect for buttons, for which we're going to have a solid white border.

.button:hover {
  border: 1px solid white;
}

If you hover over the buttons on the browser now, it'll give a nice effect.

Let's go back to the solid transparent border that we put in our .button class. If you remove this line, you'll notice a jumping effect when you hover the buttons. This is because it's making room for the white border. When you insert the code back, there's no jumping effect because the border was already there, but it was transparent. In general, such jumps are considered a bad practice with CSS, and should be avoided. Remember, if you face such a situation in the future, the simple fix is to add a transparent border.

Let's do the footer in the next video.