Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Margin of main container set to 0 yet there is still a margin

Tags:

css

margin

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.

picture of the problem

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>
like image 820
chowster Avatar asked Sep 15 '25 23:09

chowster


2 Answers

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>
like image 135
Pugazh Avatar answered Sep 18 '25 16:09

Pugazh


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%;
}
like image 45
Paidenwaffle Avatar answered Sep 18 '25 17:09

Paidenwaffle