Full-bleed section within container in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a container with padding using Tailwind CSS.

Tailwind

<div class="[1]">
  <p>This is inside a container with padding.</p>
</div>

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

Amx-0 px-0

Bfull-width p-4

Cw-full p-0

Dcontainer mx-auto px-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using full-width classes without padding.

Forgetting to center the container with mx-auto.

The class container mx-auto px-4 creates a centered container with horizontal padding.

2fill in blank

medium

Complete the code to make a section full-bleed (edge to edge) inside a container.

Tailwind

<section class="-mx-[1] bg-gray-200">
  <p>This section stretches full width.</p>
</section>

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

A2

B4

C6

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive margin instead of negative.

Using a different negative margin value than the container padding.

The class -mx-4 adds negative horizontal margin to stretch the section full width beyond the container's padding.

3fill in blank

hard

Fix the error in the code to make the full-bleed section work inside the container.

Tailwind

<div class="container mx-auto px-4">
  <section class="-mx-[1] bg-blue-300">
    <p>Full-bleed section</p>
  </section>
</div>

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

A4

B2

C-2

D-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using positive margin which adds space instead of removing it.

Using a different negative margin value than the container padding.

Use -mx-4 to apply negative margin that cancels the container's px-4 padding, making the section full-bleed.

4fill in blank

hard

Fill both blanks to create a full-bleed section with vertical padding inside a container.

Tailwind

<div class="container mx-auto px-[1]">
  <section class="-mx-[2] py-6 bg-green-200">
    <p>Full-bleed with vertical padding</p>
  </section>
</div>

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

A4

B6

C8

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for container padding and negative margin.

Forgetting to add vertical padding with py-6.

Both container padding and negative margin use 4 to align and create the full-bleed effect.

5fill in blank

hard

Fill all three blanks to create a container with padding, a full-bleed section with vertical padding, and text centered.

Tailwind

<div class="container mx-auto px-[1]">
  <section class="-mx-[2] py-[3] bg-purple-300 text-center">
    <p>Centered full-bleed section</p>
  </section>
</div>

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

A4

B6

C8

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching padding and negative margin values.

Using too small vertical padding.

Forgetting to center text with text-center.

The container uses px-4, the section uses -mx-4 to stretch full width, and py-6 adds vertical padding. text-center centers the text.