Currently Learning HTML & CSS. Coded this design for Practice

@Axel01011111 thank you very much. Can you explain how that fixed it? I dont understand.

Position absolute takes an element out of normal document flow, and then with parameters top, left, bottom and right you can adjust its position.

Important to know - when you use position: absolute, it aligns itself within top: 0 left: 0 positions of a parent (in most cases Html element). To position it relative to its parent element, you should set position: relative(or any other than static) to the parent element.

I tend not to use absolute positioning unless there is no other option, because it can cause tons of problems especially if you do not fully understand the principles of positioning.

In my solution, I used the parent element to hold those two and centered them with flex-box:

<div class"flex-parent">
  <span>29</span>
  <span>monthly</span>
</div>

CSS: 

.flex-parent {
  display: flex;
  align-items: center;
}

As for the softer look: I think it is looking softer because of image resolution/quality thing. Your website is sharper, it is not restricted by anything.

Shapes outside the container are only there for representational purposes. Those are not in an actual design. If you would want to add them anyway - this is where positioning or multiple backgrounds may be useful.

@gretagr Thank you so much for your helpful comment! I appreciate it so much. I know nothing about fex-bot, but I think that is the next topic I want to learn about.

@Nes228 Oh, you definitely do! flex-box will make your life sooo much easier! :))

Here are some of my favorite flex-box resources:

flex-box complete guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex-box cheat sheet: https://yoksel.github.io/flex-cheatsheet/ flex-box learning game: https://flexboxfroggy.com

Good luck!

Awesome. Thanks!