DIV包装/居中不工作跨浏览器

我把两个div放在一个包装内彼此相邻。它可以像我在Chrome上设计的那样工作，但它在IE和FF上都很可怕。我不知道还有什么可以尝试，因为我试过clear:both;在我能想到的每个地方，一切看起来都很悲惨。请帮忙！谢谢！DIV包装/居中不工作跨浏览器

的网页为：http://www.thorelectriclongboards.com/contact.php

我不知道有多少，这是必要的，但这里是网页代码：

<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>

在header.html唯一或footer.html会影响这是这样的：

.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; 
    }

请帮助，如果你可以！

来源

2015-07-11 user3401445

删除所有花车和内嵌样式更改.wrapper为display：block – user2182349