DIV wrapper/centering not working cross browser

I'm putting two divs next to each other inside of a wrapper. It works as I designed it to on Chrome, but it looks horrific on both IE and FF. I don't know what else to try as i've tried clear:both; in every place that I can think of and everything still looks miserable. Please help! Thank you!

The webpage is: http://www.thorelectriclongboards.com/contact.php

I do not know how much of this is needed, but here is the code for the webpage:

<html>
    <head>
        <title>Thor Electric Longboards</title>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
        <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    </head>

<style>
    .title {
        font-weight: 800;
        font-size: 20px;
        background-color: rgba(255, 255, 255, 0.0);
        margin-bottom: 24px;
        text-align: center;
    }
    input[type=submit] {
        background-color: #000080;
        color: white;
        font-size: 16px;
        width: 100%;
        border: none;
        letter-spacing: 3px;
        cursor: pointer;
        padding: 3px;
        margin-top: 8px;
    }
    input[type=text] {
        line-height: 37px;
        border: none;
        width: 100%;
        text-indent: 10px;
        font-size: 18px;
        box-sizing: content-box;
    }
    input[type=email] {
        line-height: 37px;
        border: none;
        width: 100%;
        text-indent: 10px;
        font-size: 18px;
        box-sizing: content-box;
    }
    input:focus {
        outline: none;
    }
    textarea {
        border: none;
        line-height: 20px;
        font-size: 18px;
        resize: none;
        padding-left: 10px;
        padding-top: 5px;
        outline: none;
    }
    .contact {
        text-align: left;
        border-collapse: collapse;
    }
    .lab {
        background-color: #f7941e;
        text-align: right;
        vertical-align: top;
        overflow: auto;
        padding: 10px;
        border: 1px solid #000080;
        border-right: none;
        width: 8%;
        float: left;
        color: white;
    }
    form {
        margin: 0 auto;
        background: transparent;
        width: 50%;
    }
    .table-form {
        border-collapse: collapse;
        width: 27%;
    }
    tr {
        padding-top: 10px;
        padding-bottom: 10px;           
    }
    .spacer {
        padding-top: 6px;
        padding-bottom: 6px;
        background: transparent;
    }
    .side {
        background-color: transparent;
        width: 50%;
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
        letter-spacing: 2px;
    }
    .side > a {
        display: inline-block;
        background-color: transparent;
        vertical-align: middle;
    }
    .contact-img {
        width: 20px;
        height: 20px;
        margin: 15px;
        padding: 12px;
        border: 1px solid #3c5a99;
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        background-color: transparent;
    }
    .contact-img:hover {
        opacity: 0.5;
    }
    .wrapper {
        display: inline-block;
        white-space: nowrap;
        background: transparent;
        overflow: hidden;
    }
    label {
        background-color: transparent;
        font-style: italic;
    }
</style>

<body id="background">
    <?php include 'header.html'; ?>
    <div class='main'>
        <div class='title'>CONTACT US USING ANY OF THE OPTIONS BELOW</div>
        <div class='wrapper'>
            <div class='side' style='float:left;'>
                <form id='contact-us' action='' method='POST'>
                    <table class='table-form'>
                        <tr style='border: 1px solid #000080;'>
                            <td class='lab'>NAME</td>
                            <td><input type="text" name='name'></td>
                        </tr>
                        <tr><td class='spacer'></td><td class='spacer'></td></tr>
                        <tr style='border: 1px solid #000080;'>
                            <td class='lab'>EMAIL</td>
                            <td><input type="email" name='email'></td>
                        </tr>
                        <tr><td class='spacer'></td><td class='spacer'></td></tr>
                        <tr style='border: 1px solid #000080;'>
                            <td class='lab'>MESSAGE</td>
                            <td><textarea name='message' rows="6"></textarea></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input type="submit" name='submit' value="SEND"></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class='side' style='float:right; text-align: left;'>
                <a href='https://www.facebook.com/pages/Thor-Electric-Longboards/1533188433635268' target='_blank'><img class='fb contact-img' src='img/facebook-blue.png' id='fb'></a><label for='fb'>THOR ELECTRIC LONGBOARDS</label><br>
                <a href='https://twitter.com/thorlongboards' target='_blank'><img class='tw contact-img' src='img/twitter-blue.png' id='tw'></a><label for='tw'>@thorlongboards</label><br>
                <a href='https://instagram.com/thor_electric_longboards' target='_blank'><img class='ig contact-img' src='img/instagram-blue.png' id='ig'></a><label for='ig'>THOR_ELECTRIC_LONGBOARDS</label>
            </div>
        </div>          
    </div>
    <?php include 'footer.html'; ?>     
</body>

The only thing in header.html or footer.html that would affect this is this:

    .main {
        background-color: rgba(255, 255, 255, 0.7);
        color: #121b1c;
        width: 80%;
        margin: 50px auto;
        padding: 25px;
        overflow: hidden;
        text-align: center;
        border: 1px solid black;
    }

Please help if you can!!!

Upvotes: 0