Skip to main content
se añadieron 2277 caracteres en el cuerpo
Origen Enlace

* {
    margin: 0;
    padding: 0;
}

#principal {
    background: skyblue;
    /*display: flex;
    flex-direction: column;*/
}

#principal #contenedor-1 .column ul {
    list-style: none;
}

#principal #contenedor-1 {
    border: 1px solid navy;
    width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

#principal #contenedor-2 {
    background: skyblue;
    display: flex;
    justify-content: center;
}

#principal #contenedor-2 div {
    border: 2px solid navy;
    width: 800px;
}

/* Añadido a tu código */
#principal #contenedor-1 ,
#principal #contenedor-2 {
  max-width: 100%;
}
<div id="principal">
    <div id="contenedor-1">
        <div class="column">
            <span>Título 1</span>
            <ul>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 2</span>
            <ul>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 3</span>
            <ul>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
            </ul>
        </div>
    </div>
    <div id="contenedor-2">
        <div>
            <p>Texto Texto Texto Texto Texto Texto Texto</p>
        </div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}

#principal {
    background: skyblue;
    /*display: flex;
    flex-direction: column;*/
}

#principal #contenedor-1 .column ul {
    list-style: none;
}

#principal #contenedor-1 {
    border: 1px solid navy;
    width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
}

#principal #contenedor-2 {
    background: skyblue;
    display: flex;
    justify-content: center;
}

#principal #contenedor-2 div {
    border: 2px solid navy;
    width: 800px;
}

/* Añadido a tu código */
#principal #contenedor-1 ,
#principal #contenedor-2 {
  max-width: 100%;
}
<div id="principal">
    <div id="contenedor-1">
        <div class="column">
            <span>Título 1</span>
            <ul>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
                <li>Item 1 Item 1</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 2</span>
            <ul>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
                <li>Item 2 Item 2</li>
            </ul>
        </div>
        <div class="column">
            <span>Título 3</span>
            <ul>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
                <li>Item 3 Item 3</li>
            </ul>
        </div>
    </div>
    <div id="contenedor-2">
        <div>
            <p>Texto Texto Texto Texto Texto Texto Texto</p>
        </div>
    </div>
</div>

Origen Enlace

Añade esto a tu css

#principal #contenedor-1 ,
#principal #contenedor-2 {
  max-width: 100%;
}