I am working on building a project landing page from freecodecamp learning site. I have to design the following part
Now, following is my HTML and CSS code for this part.
.price-tag { background-color: antiquewhite; border: 1px solid black; display: flex; flex-direction: column; align-items: center; padding: 0.5em 2em 0.5em 2em;}button { padding: 0.8em 1.1em; background-color:coral; border: none; font-size: 1em;}button:hover { background-color: aqua; cursor: pointer;}.price-category { background-color: aqua; width: 100%;}.price { font-size: 1.5em; font-weight: 700;}<div class="price-tag"><div class="price-category"><h3 >TENOR TROMBONE</h3></div><p class="price">$600</p><div><p>Lorem ipsum.</p><p>Lorem ipsum.</p><p>Lorem ipsum dolor.</p><p>Lorem ipsum.</p></div><button type="button">SELECT</button></div>I am close but don't quite get the complete part. The background color for TENOR TROMBONE doesn't take the entire width of the container. Also, the text below is left aligned instead of center aligned. I have used flexbox to arrange the items. How can I improve this ?
Thanks