0

I have an issue with my page its making a gap appear between the H1 and main page DIV section. After 2 hours I cant seem to fix it. Can anyone advise where its going wrong. I want the top banner and the #mainarea to be on top of each other. There is a small gap between the 2 at the moment.

body {
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  background-color: #f6f6f6;
  padding: 0;
  margin: 0;
  border: 0;
}

#logo {
  width: 100%;
  height: 50px;
  background-color: #000;
}

#mainarea {
  width: 60%;
  height: auto;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #E70A0E;
  height: 250px;
}

h1 {
  font-size: 1.5em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: bolder;
  font-style: normal;
  padding-left: 15px;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
  <h1>This is a test </h1>
</div>
Del
  • 159
  • 1
  • 10

1 Answers1

-1

Set overflow:auto; in #mainarea and add margin:auto toh1 Tag.
See, what happens when you put div inside div: https://stackoverflow.com/a/8529773/9947640 

body {
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  background-color: #f6f6f6;
  padding: 0;
  margin: 0;
  border: 0;
}

#logo {
  width: 100%;
  height: 50px;
  background-color: #000;
}

#mainarea {
  width: 60%;
  height: auto;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #E70A0E;
  height: 250px;
  overflow:auto;
}

h1 {
  font-size: 1.5em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: bolder;
  font-style: normal;
  padding-left: 15px;
  margin:auto;
}
<div id="logo">
</div>
<div style="clear: both;"></div>
<div id="mainarea">
  <h1>This is a test </h1>
</div>
Hasan
  • 355
  • 1
  • 4
  • 10