I tried css stylesheet reset which didn't do anything, and other solutions but to no fix. Margins are set to 0 on container and there is still a margin on the right hand side. If i disable the margin left 0 the extra whitespace appears on the left side. Thanks in advance.

body {
  padding-top: 50px;
}
.container {
  overflow: hidden;
  margin-left: 0 auto;
  margin-right: 0 auto;
  padding: 0 0 0 0;
}
#content {
  overflow: auto;
  background-color: #FFFFFF;
  margin-left: 0;
  margin-right: 0;
}
#content-left {
  color: #FFFFFF;
  float: left;
  background-color: #666666;
  width: 30%;
}
#content-right {
  color: #FFFFFF;
  float: right;
  background-color: #333333;
  width: 70%;
}
<body>
  <div class="container" id="main">
    <div id="content">
      <div id="content-left">
        <div>LEFT</div>
      </div>
      <div id="content-right">
        <div>RIGHT</div>
      </div>
    </div>
  </div>
</body>
Set the margin for all elements to 0px, this will remove the extra margin
* {
  margin: 0px;
}
Also add width: 100% to your .container
Note: Add this as the first style in your CSS. This can be overridden by the styles specified below.
Below is an update to your code.
* {
  margin: 0px;
}
body {
  padding-top: 50px;
}
.container {
  width: 100%;
  overflow: hidden;
  margin-left: 0 auto;
  margin-right: 0 auto;
  padding: 0 0 0 0;
}
#content {
  overflow: auto;
  background-color: #FFFFFF;
  margin-left: 0;
  margin-right: 0;
}
#content-left {
  color: #FFFFFF;
  float: left;
  background-color: #666666;
  width: 30%;
}
#content-right {
  color: #FFFFFF;
  float: right;
  background-color: #333333;
  width: 70%;
}
<body>
  <div class="container" id="main">
    <div id="content">
      <div id="content-left">
        <div>LEFT</div>
      </div>
      <div id="content-right">
        <div>RIGHT</div>
      </div>
    </div>
  </div>
</body>
Setting the width of the #content div to 100% will fix your problem. It's not a margin issue. For the width % to work on the inner divs, it needs a container width to base off of.
#content{
    overflow: auto;
    background-color:#FFFFFF;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With