order summary component main

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

• You should use <main class="container"> instead of <div class="container">.
• Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
• You should add the inline styles for your image in your stylesheet.

This should fix most of your accessibility issues and HTML issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

hey looks awesome so far! There are a few ways you can make the anual plan section work, so right now your code is like this:

<div class="plan">
    <img src="assets/images/icon-music.svg" alt="">
    <div>
        <h3>Annual Plan</h3>
        <p>$59/year</p>
    </div>
    <a href="#">Change</a>
</div>

so you could wrap your img in a div and your a tag in a div then add flex display to your plan class in css so for example the html would look like:

<div class="plan">
    <div (This would be a child of the div with the class **plan**)>
        <img src="assets/images/icon-music.svg" alt="">
    </div>
    <div (This would be a child of the div with the class **plan**)>
        <h3>Annual Plan</h3>
        <p>$59/year</p>
    </div>
    <div (This would be a child of the div with the class **plan**)>
        <a href="#">Change</a>
    </div>
</div>

after you make this change you would want to go into your css and add display: flex; to your .plan class this would look like this:

.plan{
    display: flex;
}

So what this does is make every child element of the .plan class fit horizontally across the page rather than fitting below each other or vertically you can then space then items using margins etc...

For your background image you should try adding background-repeat: no-repeat; this will stop the image replicating itself, also adding background-size: contain; and then adding background-position: bottom; this should move it into place!

Hope this helps!

Thanks a lot for the help. Although I already made changes to the css and it came out better. I appreciate all the same. And for the background image, the no-repeat worked.