htmlの列を連続した状態にするにはどうすればよいですか？

Question

@media screen and (min-width:450px){ 
    .dark-blue{ 
    width: 50%; 
    } 
    #container2{ 
    width: 50%; 
    } 
} 

このメディアクエリがトリガされると、dark-blue divとidがcontainer2のdivは1行にとどまりません。具体的には、濃い青の部分の下の空白が問題です。私が知りたいのは、それらを対称にする方法だけです。私のgithubの詳細。 https://github.com/kmfb/udacityProjects/tree/master/model。

Answer 1

私はこのような何かしようとするだろう：

@media screen and (min-width:450px){ 
    .dark-blue{ 
    width: 100%; 
    } 
    #container2{ 
    width: 100%; 
    } 
    #container2 div { 
    width: 50%; 
    display: inline; 
    } 
}