Order summary mobile first with html and css

@RMK-creative Yeah i know, in my previous challenges i did queries for middle sizes but this one i just wanted to tackle the challenge itself. I feel like the challenge at first looks very easy therefore im hard on myself on this one. I'd love to land a front-end job one day and it kinda hurts me such easy looking thing seems so hard.

I think the little box with a music icon, annual plan and link was the hardest. I always think whether i could do the html better or not, i also wonder why i couldn't center annual plan vertically. I took margins off it and just created space within the box with padding + used align-items or content, whichever it is to center it but it still was a bit to the top for some reason.

@Bernardanxiety I totally get what you mean! I've had to work a lot (and still do) on enjoying the process of learning as I build, rather than focus on getting the project done quickly. I guess it's all part of this journey that we've chosen 😉

Regarding the section you're trying to center, I just used dev tools to find that there is a margin-bottom set on <p> elements, which is applying it to your .accent class. Adding margin-bottom: 0 to the class will fix that for you. With the html for that section, maybe a <ul> with two <li> would work better in this case, and it will also help you align both lines perfectly to the left.

@RMK-creative Oh shoot, thanks, idk how come i didn't use dev tools to check where the space is coming from, i guess i took way too long breaks during studying front-end. I guess procrastination hits too hard when you just hit walls that aren't that easy to overcome or don't know what to do next.

@lisov1y 1. Centered vertically or horizontally? Because it's a little bit to the left in the design, vertically though, i somehow couldn't center it through flex align thing.

@Bernardanxiety, my bad, centered vertically. It seems it's closer to the top. I figured it out using flexbox. If you want to get better with flexboxes I strongly suggest you a game called "Flexbox zombies"(Idk if I can paste links here but you find it easily).

@lisov1y Oh, i think i've even opened it somewhere along my 500 google chrome tabs for later haha. But still, i tried to center everything vertically through align-items center and it's still to the top. Maybe because i took margins off it and created space within that div with padding? Idk but it's the only thing that's to the top like that even though they are all centered vertically.