CODEWITHSUNDEEP
htmlcss
Soumik Saha
Soumik Saha

Reputation: 13

Why is my 'h2' element overlapping with 'section' and '.frame' elements?

Here is my code that i made for exam practice. 

* {
  box-sizing: border-box;
  font-family: helvetica;
  text-decoration: none
}

body {
  width: 1000px;
  background-color: #98FB98;
  color: #006400;
  margin-left: auto;
  margin-right: auto;
  list-style-type: none;
}

header {
  width: 1000px;
  height: 110px;
}

header img {
  width: 100px;
  height: 110px;
  float: left;
  text-align: center;
}

h1 {
  width: 900px;
  text-align: center;
  height: 110px;
  float: left;
}

nav {
  height: 310px;
  width: 100px;
  text-align: center;
  float: left;
}

h2 {
  width: 890px;
  text-align: center;
  float: left;
}

section {
  width: 440px;
  float: left;
  text-align: center;
}

.frame {
  width: 440px;
  float: left;
  text-align: center;
}
<body>
  <header>
    <img src="images\LOGO.jpg" width=100px>
    <h1>
      Outgrove Park Ramblers
    </h1>
  </header>
  <nav>

    <li><a href="index.html">HOME</a>
      <li><a href="SCHEDULE.html">SCHEDULE</a>
        <li><a href="WILDLIFE.html">WILDLIFE</a>
          <li><a href="LANDMARK.html">LANDMARK</a>

  </nav>
  <section>
    <h2>
      Home
    </h2>

    <p>
      blah blah blah
    </p>
  </section>
  <div class="frame">
    <img src="images\HIKER.jpg" width=210px>
  </div>


</body>

as you can see, it's very basic. I have made many other pages like this, but now i am facing this problem. My h2 over laps with the 'section' and '.frame' elements.I have added an image to show how it looks when i inspect the code on chrome. First i thought it was because i gave h2 a specific height, but i removed it and still nothing occured. I want this so that h2 takes its own place and the section and .frame elements are below it. Everything seems to be alright except for the overlapping h2 element. How can i solve this?

enter image description here

Upvotes: 1

Views: 393

Answers (2)

Anurag
Anurag

Reputation: 307

width of h2 is more than width of section in your code. And try using css property max-width instead of width. This will restrict the h2 element to cross the specified width.

Upvotes: 1

Jack Walker
Jack Walker

Reputation: 41

you have given more width to <h2> than <section>.

Upvotes: 0

Related Questions