CODEWITHSUNDEEP
htmlcss
SiliconMachine
SiliconMachine

Reputation: 606

Cannot position divs correctly

I'm trying to create a div (gray background) at the top of my div-container and I can not make it match with the background-width size since there is a gap in the left side of the block.

Could someone explain me why? 

body {
    background-color: #a71930;
}
.container {
    height: 1200px;
    width: 1200px;
    background-color: white;
    margin-top: 50px;
}
div#about {
    height: 400px;
    width: 1200px;
    background-color: #a5acaf;
    margin-left: 0px;
}
   

<body>
  <div class="container">
    <div id="about"></div> 
  </div>
</body>

codepan

Upvotes: 0

Views: 42

Answers (3)

Yousaf
Yousaf

Reputation: 29282

I couldn't reproduce your problem in codepen but there are couple of things that you can try here to fix this problem.

1- Reset the margin and padding of each html element to 0. Add following code to your CSS file.

*{
    margin: 0;
    padding: 0;
 }

2- Set the width of second div to 100%

Upvotes: 1

Roger B. H.
Roger B. H.

Reputation: 199

I believe the 'gap' you mentioned is just because you didn't reset the margins of your <body> tag.

Just set it to 0 like so:

body{margin: 0;}

Upvotes: 0

Anonymous
Anonymous

Reputation: 1990

use the css code 

.container{padding:0px}

Upvotes: 0

Related Questions