[FIXED] How to display container that is centered with content that is in the far left and far right of it

Issue

I would like to display the price of an object on my html website. This is what I would like it to look like:

1. Dynamic
2. The container is centered on the page with a max width of 400px
3. The "price" string is on the far left while the actual price is on the right of the centered content

This is what my html looks like:

<div class="price-container">
        <div class="price">price:</div>
        <div class="price-number">{{ event.price }}.00</div>
</div>

This is what my css looks like:

.price-container{
   font-family: Montserrat;
   text-transform: uppercase;
   color: white;
   font-weight: 700;
   font-size: 20px;
   width: 90%;
   max-width: 400px;
}

.price{
   float: left;
}

.price-number{
   float: right;
}

Solution

If you want to center it horizontally, you need to add margin:auto. I also cleared the floats for you.

.price-container{
   font-family: Montserrat;
   text-transform: uppercase;
   color: black;
   font-weight: 700;
   font-size: 20px;
   width: 90%;
   max-width: 400px;
   margin: auto;
   border: 1px solid red;
}

.price{
   float: left;
}

.price-number{
   float: right;
}

<div class="price-container">
        <div class="price">price:</div>
        <div class="price-number">{{ event.price }}.00</div>
        <div style="clear:both"></div>
</div>

Answered By - IT goldman