In this video, we are going to implement sizes. because elements rarely span from left to right on a page. Rather, elements should occupy only a maximum width and height on a page.

Open styles.css and go to the #sub tag. Here, we will contain the width of this element to 300px.

width: 300px; 

Observe, this shrinks our subheading.

However, since we are hardcoding a value here, our padding on the right is ignored. So, it kind of looks unappealing and out-of-place. In general, your width attribute will take priority and will ignore other attributes that conflict.

A preferred method would be to shrink it via a percentage value, such as below:

width: 50%; 

This would shrink the value to what the browser considers 50%. The advantage with this option is the size of this element would be 50%, even if you resize the browser to fit a mobile screen.

Now, when you say 50%, it takes this value before our padding. For example, if you enter 50% and have a padding of 100px, then the width as a whole will amount to more than 50%. This is a vital consideration to keep in mind while deciding which value. This explains why our subheading element occupies slightly more than half the page width. So, to make it exactly half, the width has been updated to 40%.

Next, we'll see how to edit the height. If you look at our heading, you'll see that it occupies quite some space, and this is because we've given a padding of 42px on all sides.

If we want to reduce the height, we can remove the padding and simply have a height attribute.

height: 200px; 

However, our text would be right at the top, and aligning it could become difficult.

Because of this, I'm bringing back the padding. Nevertheless, it's beneficial to be aware of the variety of options.