Content area in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the content area width to 50rem.

CSS

main { width: [1]; }

Drag options to blanks, or click blank then click option'

A50%

B50px

C50rem

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using pixels (px) which are not scalable.

Using percentage which depends on parent size, not always desired.

The width property controls the content area width. Using 50rem sets it to 50 times the root font size, which is responsive.

2fill in blank

medium

Complete the code to add 2rem padding inside the content area.

CSS

section { padding: [1]; }

Drag options to blanks, or click blank then click option'

A2rem

Bauto

C20%

D2px

Attempts:

3 left

💡 Hint

Common Mistakes

Using px which is fixed size and less accessible.

Using auto which does not work for padding.

The padding property adds space inside the element. 2rem adds space relative to the root font size, making it accessible and consistent.

3fill in blank

hard

Fix the error in the code to correctly set the content area margin to center horizontally.

CSS

article { margin: [1] auto; }

Drag options to blanks, or click blank then click option'

A0

Bauto

Ccenter

D50%

Attempts:

3 left

💡 Hint

Common Mistakes

Using center which is not a valid margin value.

Using auto for top and bottom margin which causes vertical centering.

To center an element horizontally, set the left and right margins to auto and top and bottom margins to 0. The code uses shorthand margin: 0 auto;.

4fill in blank

hard

Fill both blanks to create a content area with a max width of 60rem and automatic horizontal margin.

CSS

div.content { max-width: [1]; margin: 0 [2]; }

Drag options to blanks, or click blank then click option'

A60rem

Bauto

C50%

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed width instead of max-width.

Using 0 instead of auto for horizontal margins.

Setting max-width: 60rem; limits the content width. Using margin: 0 auto; centers the content horizontally.

5fill in blank

hard

Fill all three blanks to create a responsive content area with padding, max width, and centered margin.

CSS

section.wrapper { padding: [1]; max-width: [2]; margin: 0 [3]; }

Drag options to blanks, or click blank then click option'

A1.5rem

B60rem

Cauto

D2rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1.5rem for padding instead of 2rem as required.

Using fixed width instead of max-width.

Using 0 instead of auto for horizontal margins.

Padding of 2rem adds space inside. max-width: 60rem; limits width. margin: 0 auto; centers horizontally.