My results

Great job on your work! 👏 I have a couple of tips that might help you improve it even further.

Firstly, to prevent the background from repeating, you can set the size to cover and repeat to no repeat. Here's the code you can use:

body {
    background-image: url(images/pattern-background-desktop.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

This will make sure your background image covers the entire page without repeating, giving your site a more polished look.

Secondly, instead of using a div to wrap your content, it's better to use the main element, which is more semantic and helps with accessibility. Here's an example:

<main>
</main>

Finally, when wrapping your cancel button in an a tag, it's a good idea to wrap it in a div as well and give it some margin bottom to match your design. Here's the code you can use:

<div style="margin-bottom: 20px;">
  <a href="#" class="cancel-button">Cancel</a>
</div>

That's all! Keep up the good work and happy coding! 💖

Apply this and your background will stop repeating vertically.

Body {

background-repeat: repeat-x;

}