How can I make that columns in html stay in a row?

Question

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

When this media query triggers, the dark-blue div and the div whose id is container2 will not stay in a row. Specifically, a blank below the dark-blue div is the issue. All I want to know is how to make them symmetrical. More detail in my github.https://github.com/kmfb/udacityProjects/tree/master/model.

Answer 1

I would try something like this:

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