-2

In the CSS div div, I set the display property value to inline and the .nav classed <div> in the HTML disappeared. The .nav classed <div> appears only if I remove the display: inline; property.

Here is my code:

* {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

div div {
  display: inline;
}

.nav {
  color: white;
  background-color: red;
  position: relative;
  width: 200px;
}
<body>
  <div class="container">
    <div class="nav">
      <h2>Menu Bar<h2>
      <ul><li>Option1</li><li>Option2</li><li>Option3</li></ul>
    </div>
    <div class="main">
      <h1>Site Title</h1>
      <p id="dp">Here is the paragraph.<p></div>
    </div>
  </div>
</body>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Salman Khan Majlish
  • 33
  • 1
  • 5

1 Answers1

0

It's happening because you have added block level element <h2> inside the .nav div which is right now having the inline property.

If you still want inline property to .nav then please apply the same display inline property to child elements i.e. h2 or change the property of div div { display: inline-block; }, but it's a wrong practice to keep block level elements inside inline elements.

Paurnima Partole
  • 71
  • 5