
Santiago Ruberto
PreguntaHola, pude hacer el reto pero no logro que quede centrado la tabla de monedas con la de comisiones, no se como hacer para que me queden centradas ambas y una al lado de la otra
<code> main { width: 100%; min-width: 320px; height: auto; display: flex; flex-direction: column; background-color: var(--off-white); } .main-exchange-container { width: 100%; height: auto; padding-top: 80px; padding-bottom: 30px; text-align: center; } .main-exchange-container--title { width: 90%; min-width: 288px; max-width: 900px; margin: 0 auto; } .main-exchange-container .backgroundImg { width: 200px; height: 200px; margin: 0 auto; margin-bottom: 50px; background-image: url("./Logos/Bitcoin.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .main-exchange-container h2 { margin-bottom: 30px; font-size: 2.4rem; font-weight: bold; line-height: 2.6rem; color: var(--black); } .main-exchange-container p { margin-bottom: 30px; font-size: 1.4rem; font-weight: 500; line-height: 1.6rem; color: #757575; } .main-currency-table { width: 70%; min-width: 235px; max-width: 500px; height: 360px; margin: 0 auto; font-family:'Inter', sans-serif; } .main-currency-table .currency-table--title { margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 2.3rem; color: var(--bitcoin-orange); } .currency-table--container { width: 90%; min-width: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .currency-table--container table { width: 100%; height: 100%; } .currency-table--container td { width: 50%; font-size: 1.6rem; font-weight: 500; line-height: 1.9rem; color: var(--grey); background-color: var(--just-white); } .currency-table--container .table__top-left { border-radius: 15px 0 0 0; } .currency-table--container.table__top-right { border-radius: 0 15px 0 0; } .currency-table--container .table__bottom-left { border-radius: 0 0 0 15px; } .currency-table--container .table__bottom-right { border-radius: 0 0 15px 0; } .currency-table--container .table__right { font-size: 1.4rem; font-weight: normal; line-height: 1.7rem; color: #757575; } .currency-table--container .down { display: inline-block; width: 15px; height: 15px; margin-left: 10px; background-image: url("./icons/trending-down.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--container .Up { display: inline-block; width: 15px; height: 15px; margin-left: 10px; background-image: url("./icons/trending-up.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--date { width: 190px; height: 30px; margin: 0 auto; margin-top: 15px; padding: 8px; background-color: var(--soft-orange); border-radius: 8px; width: max-content; } .currency-table--date p { font-size: 1.2rem; font-weight: 500; line-height: 1.5rem; color: var(--warm-black); } /*Comisiones */ .main2-currency-table { width: 70%; min-width: 235px; max-width: 500px; height: 360px; margin: 0 auto; font-family:'Inter', sans-serif; } .main2-currency-table .currency2-table--title { margin-top: 15px; margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 2.3rem; color: var(--secondary-blue); } .currency2-table--container { width: 90%; min-width: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .currency2-table--container table { width: 100%; height: 100%; } .currency2-table--container td { width: 50%; font-size: 1.6rem; font-weight: 500; line-height: 1.9rem; color: var(--grey); background-color: var(--just-white); } .currency2-table--container .table__top-left { border-radius: 15px 0 0 0; } .currency2-table--container.table__top-right { border-radius: 0 15px 0 0; } .currency2-table--container .table__bottom-left { border-radius: 0 0 0 15px; } .currency2-table--container .table__bottom-right { border-radius: 0 0 15px 0; } .currency2-table--date { width: 190px; height: 30px; margin: 0 auto; margin-top: 15px; padding: 8px; background-color: var(--soft-blue); border-radius: 8px; width: max-content; } .currency2-table--date p { font-size: 1.2rem; font-weight: 500; line-height: 1.5rem; color: var(--warm-black); }