Splitting screen trouble

I tried making a responsive split screen on codepen. When the size of the screen is small, it gives columns otherwise you get two rows. Everything works fine on codepen. But when I try to implement this code into the code of my website, the grey area diminishes. What could possibly be the reason?

http://codepen.io/bellarose/pen/YqGZLL

HTML:

<section class="first-section">
<body>
   <div class="container-info">         
     <h1>first screen</h1>
   </div>
   <div class="container-main">
     <h1>second screen</h1>
   </div>
</body>
</section>

<section class="second-section">
<body>
   <div class="container-info1">            
     <h1>first screen</h1>
   </div>
   <div class="container-main1">
     <h1>second screen</h1>
   </div>
</body>
</section>

CSS:

.first-section {
    height: 100%;
    text-align: center;
}

.second-section {
    height: 100%;
   text-align: center;
}

.container-info {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: red; }
  @media (min-width: 768px) {
    .container-info {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } }



.container-main {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: grey; }
  @media (min-width: 768px) {
    .container-main {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }


.container-info1 {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: pink; }
  @media (min-width: 768px) {
    .container-info1 {
      float: left;
      left: 0;
      top: 0;
      height: 100%;
      width: 50%; } }



.container-main1 {
  display: inline-block;
  position: relative;
  width: 100%;
  min-height: 490px;
  background-color: white; }
  @media (min-width: 768px) {
    .container-main1 {
      float: right;
      right: 0;
      top: 0;
      height: 100%;
      width: 50%; } }