Nie mogę zmienić szerokości i wysokości diva

pytanie zadane 11 września 2017 w HTML i CSS przez MercinQ Początkujący (370 p.)
zamknięte 11 września 2017 przez MercinQ

Witam,

Podczas nauki animacji z css trafiłem na problem, nie wiem dlaczego nie mogę zmienić wysokości i szerokości div_1 i div_2 na inspektorze oba divy są na stronie ale ich wysokość jest równa zero a szerkość równa szerokości ekranu.

Proszę o pomoc ale nie rozwiązania problemu tylko wytłumaczeniu mi dlaczego tak się dzieję. Dzięki z góry za pomoc. Kod wklejam poniżej.

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
   <meta charset="utf-8"/>
   <link rel="stylesheet" type="text/css" href="costyle.css">
   <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body>
    <div id="container">
        <h1>Co Dziś Wypij<span id="B">e</span>sz?</h1>
          <div style="clear:both"></div>
        <div id="div_1">
        </div>
           <div style="clear:both"></div>
        <div id="div_2">
        </div>
    </div>
</body>
</html>

*{
    padding: 0;
    margin: 0;
}
#container{
    width:100vw;
    height:100vh;
    background-color:#000000;
}
h1{
    font-size: 9vw;
    letter-spacing: 0.7vw;  
    font-family: 'Ubuntu', sans-serif;
    color:#fe7f00;
    text-shadow: 0 0 1vw white, 0 0 0.1vw #24bbe5;
    animation: bla;
    animation-duration: 2s;
    margin-bottom: 30vw;
    
}
#B{
    transform: rotate(15deg) translateY(0.2vw);
    animation: miganie 1.5s infinite linear;
}
@keyframes miganie{
    0%{
        opacity: 0;
    }
    8%{
        opacity: 1.1;
    }
    26%{
        opacity: 1;
    }
     39%{
        opacity: 0.25;
    }
    50%{
        opacity: 1;
    }
    60%{
        opacity: 0.2;
    }
    70%{
        opacity: 0.3;
    }
    83%{
        opacity: 0.6;
    }
    91%{
        opacity:0,3; 
    }
    100%{
        opacity: 1;
    }
}
@keyframes bla{
    0%{
        opacity: 0;
    }
    20%{
        opacity: 0.5;
    }
    30%{
        opacity: 0.1;
    }
    51%{
        opacity: 0.3;
    }
    68%{
        opacity: 0.1;
    }
    88%{
        opacity: 0.6;
    }
    93%{
        opacity: 0.9;
    }
    100%{
        opacity: 1;
    }
    #div_1{
        width:300px;
        height: 200px;
        background-color: aliceblue;
        float:left;}
        
    #div_2{
        width: 300px;
        height: 400px;
        background-color: red;
    }

komentarz zamknięcia: problem został rozwiązany