Placing two modules side by side

I'm trying to place these two modules

side by side. They are in the same position and the proper ordering. I've also created a new module suffix for the width of the modules. Here's the code:

Code: Select all

.box.color3 .content {
   clear: none!important;
   float: left;
   width: 50%;
}

.box.color3 .header {
   color: #0090BE;

}

.box.border.color3 {
clear: none!important;
   float: left;
   width: 50%;

}


.box.color3 .header:hover{
color: #CA990D;
}

.box.color3 a{
   color: #000000;
     -webkit-transition: color 0.2s linear;
  -moz-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  transition: color 0.2s linear;
  text-decoration: none;
  -webkit-transform: translateZ(0);
   
}

.box.color3 a:hover
   {
     color: #CA990D;
   }
   
   .box.color3 a:active
   {
     color: #CA990D;
   }
   
   .box.color3 a:focus
   {
     color: #CA990D;
   }


Also, I'm running the site locally so I couldn't provide the link of the website.
I hope you can help me out here

Sorry, with no live access I can't help much.
Perhaps you could post it somewhere live for the time being?

I've solved the problem. I've placed this

Code: Select all

#gkMainbody .box,
#gkMainbodyTop .box{
   border-top: 1px solid #e5e5e5;
}
#gkMainbodyBottom .box {
   border-top: 1px solid #e5e5e5;
   width: 50%;
   display: inline-block;
}


in the override.css file and changed the width from 50% to 100% from the piece of code that I posted in the question and it works brilliantly.

I'm glad you could solve it out by yourself.
If you have any additional questions regarding this topic, please let me know.