Help! Can't understand this DIV behaviour

HTML-CSS
1

I think it is superbasic stuff, but I don’t get it:

The black framed three divs with the <h2>Bootstrap v3.3.6</h2> should be placed in a div which should appear under the pic not on the pic.

Please consider taking a look here:

https://sven72.github.io/conquer/

46
461673×870 444 KB

I have no idea, what went wrong.

Thank you for your help!

The HTML ist here:

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="header">
    <ul>
      <li><a href="#Homepage">Homepage</a></li>
      <li><a href="#Homepage">About</a></li>
      <li><a href="#Homepage">Services</a></li>
      <li><a href="#Homepage">Contact</a></li>
    </ul>
  </div><!-- header -->
  <div class="hero">
    <div class="hero-text">
      <!--
        <img src="img/bg-1.jpg" alt="Hero Titelbild">
        -->
      <h1>Conquer</h1>
      <h2>Simple Bootstrap Template without Bootstrap</h2>
    </div> <!-- hero-text -->

    **<div class="hero1">**
      <!-- hero --->
      <div class="hero--cont">
        <div class="hero__pic">
        </div>
        <!--hero__pic-->
        <div class="hero__content">
          <h2>
            Bootstrap v3.3.6
          </h2>
          <p>
            Morbi sagittis justo a velit placerat ullamcorper quis
            quis velit. Sed convallis at risus ullamcorper auctor.
            Praesent quis velit neque. Quisque semper
            porta nisi vitae suscipit. Duis lectus magna, ornare
            ac scelerisque.
          </p>
        </div>
        <!--hero__content-->

        <div class="hero--cont">
          <div class="hero__pic">
          </div>
          <!--hero__pic-->
          <div class="hero__content">
            <h2>
              Bootstrap v3.3.6
            </h2>
            <p>
              Morbi sagittis justo a velit placerat ullamcorper quis
              quis velit. Sed convallis at risus ullamcorper auctor.
              Praesent quis velit neque. Quisque semper
              porta nisi vitae suscipit. Duis lectus magna, ornare
              ac scelerisque.
            </p>
          </div>
          <!--hero__content-->

          <div class="hero--cont">
            <div class="hero__pic">
            </div>
            <!--hero__pic-->
            <div class="hero__content">
              <h2>
                Bootstrap v3.3.6
              </h2>
              <p>
                Morbi sagittis justo a velit placerat ullamcorper quis
                quis velit. Sed convallis at risus ullamcorper auctor.
                Praesent quis velit neque. Quisque semper
                porta nisi vitae suscipit. Duis lectus magna, ornare
                ac scelerisque.
              </p>
            </div>
            <!--hero__content-->
      </div>
      <!--hero1-cont1-->

    </div> <!-- hero1 -->
</body>

</html>
2

Hi @Sven72,

Currently div with class="hero1" is nested inside div with class="hero". That is why those three mentioned divs appear on the background image. Remove it and its content from inside of div with class="hero" and write it outside.

1 Like