Below is the code for simple page the screenshot of the results. My question is: why is the table has an offset relative to the left border? In other words, why table is not positioned flush with the left border of the top row (green)? Thanks.
<https://lh6.googleusercontent.com/-OQii7aFhy9U/UIdLVGTe8XI/AAAAAAAAAAM/cXmcS0aSwYc/s1600/test.png> <!DOCTYPE html> <head> <title>bsTest2</title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <style> .login { background-color: #4781BD; font-size: 12px; text-align: center; color:White; height: 20px; margin: top 2px bottom 2px; } .topmenu { background-color: #00B050; height: 30px; } .blockcontent { background-color: #EEECE1; } </style> </head> <body> <div class="container"> <div class="row topmenu"> <div class="span1 offset10 login"> Register </div> <div class="span1 login"> Login </div> </div> <div class="row "> <div class="span7"> <Strong>Table 1</Strong> <table class = "table blockcontent"> <thead> <th style="width:30%">What</th> <th style="width:70%">Details</th> </thead> <tbody> <tr> <td>Cell(0,0)</td> <td>Cell(0,1)</td> </tr> <tr> <td>Cell(1,0)</td> <td>Cell(1,1)</td> </tr> </tbody> </table> </div> <div class="span4 offset1"> <Strong>Table 2</Strong> <table class = "table smaller"> <thead> <th style="width:30%">Type</th> <th style="width:70%">Details</th> </thead> <tbody> <tr> <td>Cell(0,0)</td> <td>Cell(0,1)</td> </tr> <tr> <td>Cell(1,0)</td> <td>Cell(1,1)</td> </tr> </tbody> </table> </div> </div> <footer class="topmenu">Copyright</footer> </div> </body> </html>
