últimos mensajes de: Beginner Web

Hola como veran no puedo alinear el asida de mi pagina.

lo quiero aquí.

https://i.ibb.co/1bmy1yr/2013-05-25-copia.jpg :huh:

Código

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pati</title>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
</head>
 
<body>
    <header class="cabecera text-aling">
        <div class="caja izquierda">
            <a href="index.html" class="ancla logo">PATI</a>
            <p>Siempre pensando en la gente.</p>
        </div>
        <div class="caja derecha">
            <p class="contratar">Contratar: 0388-123456</p>
            <p class="emergencias">Emergencias: 0303456</p>
            <a href="registro.html" class="ancla derecha">Ingresar</a>
        </div>
    </header>
 
    <nav>
 
        <a class="nav-enlace" href="#">Inicio</a>
        <a class="nav-enlace" href="#">Programación</a>
        <a class="nav-enlace" href="#">Noticias</a>
        <a class="nav-enlace" href="#">Cocina</a>
        <a class="nav-enlace" href="#">Animes</a>
        <a class="nav-enlace" href="#">Contacto</a>
 
    </nav>
 
    <main>
        <section class="flex">
            <div class="izquierda">
                <p class="titulo">¿Quienes somos?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
                    asperiores,
                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
                    sapiente
                    reiciendis nihil enim.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
                    asperiores,
                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
                    sapiente
                    reiciendis nihil enim.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolores odio odit? Quidem
                    asperiores,
                    iure enim reprehenderit libero ducimus voluptatibus pariatur veniam modi veritatis! Magni vel
                    sapiente
                    reiciendis nihil enim.</p>
                <p> ...</p>
            </div>
        </section>
 
        <section class="flex text-align">
 
            <div class="columna">
                <h1>Plan Joven</h1>
                <p class="precio">$600</p>
                <p>Lorem ipsum dolor, sit amet consectetur.</p>
                <hr>
                <p>Lorem ipsum dolor </p>
                <p>Lorem ipsum dolor</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <hr>
                <a href="#" class="btn-comprar">Comprar</a>
            </div>
 
            <div class="columna">
                <h1>Plan Adulto</h1>
                <p class="precio">$900</p>
                <p>Lorem ipsum dolor, sit amet consectetur.</p>
                <hr>
                <p>Lorem ipsum dolor </p>
                <p>Lorem ipsum dolor</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <hr>
                <a href="#" class="btn-comprar">Comprar</a>
            </div>
 
            <div class="columna">
                <h1>Plan Leyenda</h1>
                <p class="precio">$1200</p>
                <p>Lorem ipsum dolor, sit amet consectetur.</p>
                <hr>
                <p>Lorem ipsum dolor </p>
                <p>Lorem ipsum dolor</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                <hr>
                <a href="#" class="btn-comprar">Comprar</a>
            </div>
 
        </section>
    </main>
 
    <aside class="side">
 
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore alias qui distinctio vero
            repudiandae aliquam mollitia obcaecati cum, quis voluptatibus deleniti quia inventore, eius totam unde! Ad
            corrupti voluptatem maiores!</p>
 
    </aside>
 
    <footer>
        <ul>
            <li><a href="aviso-legal.html">Aviso legal</a></li>
            <li><a href="privacidad.html">Privacidad</a></li>
            <li><a href="contactar.html">Contactar</a></li>
        </ul>
    </footer>
 
</body>
 
</html>

Creo que estoy maquetando mal

Código

p {
    margin: 0px auto;
}
 
.ancla {
    text-decoration: none;
}
 
.logo {
    font-size: 80px;
    color: lightseagreen;
    font-family: 'Baloo Thambi 2', cursive;
}
 
.titulo {
    font-size: 40px;
    color: lightseagreen;
    font-family: 'Baloo Thambi 2', cursive;
}
 
.cabecera {
    margin: 10px auto;
    padding: 10px;
    width: 90%;
    padding-bottom: 180px;
}
 
.side{
    margin: 0 auto;
    float: right;
    width: 24%;
}
 
.flex {
    display: flex;
    width: 70%;
}
 
.text-align {
    text-align: center;
}
 
.caja {
    margin: 10px auto;
    padding: 10px;
    width: 23%;
}
 
.izquierda {
    float: left;
}
 
.derecha {
    float: right;
}
 
.contratar {
    background: rgb(85, 85, 247);
    border-radius: 8px;
    color: white;
    text-align: center;
    font-size: 26px;
    margin: 10px auto;
}
 
.emergencias {
    background: salmon;
    border-radius: 8px;
    color: white;
    text-align: center;
    font-size: 26px;
    margin: 10px auto;
}
 
.columna {
    background: rgb(238, 238, 238);
    color: #333;
    border: 1px solid #333;
    margin: 10px auto;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 5px 5px;
    width: 23%;
    box-sizing: border-box;
    display: inline-block;
}
 
.precio {
    font-size: 50px;
    color: lightseagreen;
}
 
.btn-comprar {
    background: salmon;
    display: block;
    padding: 10px;
    color: seashell;
    text-decoration: none;
    border-radius: 4px;
}
 
.btn-comprar:hover{
    background: rgb(97, 97, 248);
 
}
 
nav {
    padding: 10px;
    display: flex;
    justify-content: space-around;
}
 
.nav-enlace {
    color: whitesmoke;
    background-color: rgb(80, 80, 241);
    padding: 10px 40px;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    border-radius: 6px;
}
 
.nav-enlace:hover{
    color: whitesmoke;
    background-color: rgb(240, 143, 159);
    padding: 10px 40px;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
    border-radius: 6px;
}
 
@media (max-width: 900px) {
    .columna {
        width: 46%;
    }
}
 
@media (max-width: 600px) {
    .columna {
        width: 92%;
    }
}