Units

Pixels are fixed: 250 pixels are 250 pixels on a phone and on a large monitor alike. That's fine for small things, but larger parts of a page often need sizes that adapt to the screen. That's what other units are for:

• % (percent): a share of the parent's size. width: 50% means half the width of the parent. (In height, percentages only work when the parent has a set height, so they are mostly used for widths.)
• vw and vh (viewport width and viewport height): 1% of the width or the height of the browser window. An element with height: 100vh is as tall as the whole window. In our exercises, the window is the preview.
• rem, which you know from the previous lesson: 1rem is the base font size, usually 16 pixels. It suits sizes that should grow along with the text, for example when a visitor sets a larger font in their browser.

The section element with the text now spans the whole width of the page. On a wide screen, the lines of text are then very long and hard to read. Let's make it narrower with a percentage, so that it fits any screen.