Order Summary Component using CSS flexbox and mobile first workflow

Hello! I just started to learn HTML & CSS basics, and this is my first HTML & CSS project.

I was wondering if there's a better way to position 'attribution' div under the 'container' div. There're only two main divs inside the body -- 'container' and 'attribution.' I managed to doing it by setting

'position: absolute' 'bottom: 8vh'

The problem of this setup is when resizing the web page, when the height is shortened, the attribution will touch and overlap the screen since its position is set according to the bottom. However, what I wanted to do is to set 'attribution' position below the 'container'/screen , relative to the container not to the web page.

Also, I feel that I used too many divs in the index.html, not sure if this is the best practice in terms of HTML semantics. Same goes for class selectors in styles.css.

I'm in the process of picking up the HTML&CSS basics from online tutorials, so any feedback will be appreciated.