Element not Lining up Next to each other CSS/HTML

Question

I have a problem with two of the elements i want them to settle next to each other and be in center of window (Not Responsive) I also don't want them to be over lap when window shrink.

you can see the version at roolt.com the two elements are STARTER and PREMIUM i want them to be centered and set next to each other.

HTML:

<div class=" main-container">
    <div class="960" >
        <div id="starter">
               <?php include'PHP_element/packges/starter.php'; ?>
        </div>
        <div id="premium">
               <?php include'PHP_element/packges/premium.php'; ?>
        </div>
    </div>
</div>

CSS:

.main-container {
    position:static;
    width: 100%;
}

.960 {
    position: static;
    margin: 0 auto;
    width: 960px;
}

#starter {
    width: 50%;
    float: left;
}

#premium {
    width: 50%;
    float: left;
}

.container-480 {
    width: 480px;   
}

Answer 1

The problem is the .960 class name. In CSS, class names cannot start with a number. Change your classname to .nine60, or something else that doesn't start with a numeral, and that will fix your issue.

Answer 2

You can just add another css class

#starter .container-480 {
float: right;
}

You have this .container-480 css class that tells both box containers to float left, but the above class will make sure that the starter container floats right next to the premium container.

good luck.