I'm here again, layout trouble :x-CodePudding

I'm here again, now I'd like the reason that I can't put into the div "conteudo-container" the divs "conteudo-principal" and "conteudo-lateral", I figured the values, it's compatible with the layout, but widely twos divs don't fit in the main div. I'm stuck on this problem. I'll be grateful for some help. PS: I marked the "conteudo-container" div to show that don't allow put into the other two elements.

body{
    font-family: "Trebuchet", Helvetica, sans-serif ;
    background: #f2f2f2;
}

#principal{   
    margin:0 auto;
    width:2220px;
    margin: 6px solid green;
}

#div-superior{
    width:2220px;
    padding-top:70px;
    padding-bottom:50px;    
    text-align:center;
    
}

#div-superior img:hover{
    border: 5px dashed #4d4d4d;
}

#conteudo-container{
    width:2020px;
    padding-top:50px;
    border: 2px dashed #01d3cc;
 }

#conteudo-principal{
    width:1820px;
    text-align:center;
    min-width:720px;
    float:left;
    
}

#conteudo-principal h2{
    color:#0953f3;
}

#conteudo-principal img:hover{
    border: 3px solid indigo;
    
}

#conteudo-lateral{
    float:right;
    width:180px;
     
}

#conteudo-lateral:hover{
    background-color:#fff1f2;
    color:#000000;
    font-size: 18px;
    
}

#conteudo-lateral h3{
    color:#72146d;
}

#navegacao-bar{
    border: 2px dashed crimson;
    width:180px;
    float:bottom;
    padding-bottom:20px;
  
}

#navegacao-bar a{
    text-decoration:none;
    
}

#navegacao-bar:hover{
    background:pink;
}


#rodape{
    padding-top:10px;
    height:20px;
    clear:both;
    background:#90c4d6;
    text-align:center;

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\Imagens-Liquidas-estilo-2.css">
        <title> IMAGENS LÍQUIDAS 2 </title>
    </head>
<body>
         
    <div id="principal">

         <div id="div-superior">
            <img src="https://media.istockphoto.com/photos/beautiful-looking-young-blonde-woman-with-the-middle-length-hair-in-picture-id1322686195?b=1&k=20&m=1322686195&s=170667a&w=0&h=Xnb8HCK8eBKophysfPBF0GzbMIyoQrz8Js6TwkCDMPY=" width="480" height="260">
               
            </div>
       
        <div id="conteudo-container">

            <div id="conteudo-principal">

                <h2>CONTEUDO PRINCIPAL</h2>

                    <img src="https://images.unsplash.com/photo-1589525231707-f2de2428f59c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8YXNpYW4lMjB3b21hbnxlbnwwfHwwfHw=&w=1000&q=80" width="480" height="260">

                
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Ut non tincidunt libero, quis porttitor tortor. 
                    Vestibulum tellus nibh, ultrices at sem sit amet, facilisis mollis justo. 
                    Phasellus nec nunc quis massa aliquam gravida. 
                    </p>
            
                    <img src="https://images.unsplash.com/photo-1589525231707-f2de2428f59c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8YXNpYW4lMjB3b21hbnxlbnwwfHwwfHw=&w=1000&q=80"  width="480" height="260">

            </div>
            
            <div id="conteudo-lateral">
                <h3>Título Conteúdo Lateral</h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Ut non tincidunt libero, quis porttitor tortor. 
                    Vestibulum tellus nibh, ultrices at sem sit amet, facilisis mollis justo. 
                    Phasellus nec nunc quis massa aliquam gravida. 
                    </p>
                    
            </div>

        </div>
        
        <div id="navegacao-bar">
                <ul>
                    <li>
                    <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html">   home</a>
                    </li>
                    <li>
                    <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html"> Sobre</a>
                    </li>
                    <li>
                        <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html">Contato</a>
                    </li>
                    <li>
                        <a href="C:\Users\Yuri\Documents\Workspace_Html\CSS - INTERMEDIARIO 3\imagens-Liquidas-2.html">Informações</a>
                    </li>
                </ul>
        </div>

       
        <div id="rodape"> RODAPÉ </div>

    </div>

    

</body>

</html>

grateful for some help. Thanks.

CodePudding user response：

In your #principal id you have syntax error the margin property doesn't accepts the solid and color values.