0

I wanted to create a web page, after making the navigation bar the h3 won't display probably I don't know why and this is what I am getting:

A screenshot of the output I'm getting

.Navigation {
  width: 100%;
  height: 30%;
  float: center;
  border: 2px solid black;
}

ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

a.Navi {
  float: left;
}

li a {
  color: black;
  background-color: transparent;
  text-align: center;
  padding: 14px 16px;
}

li a:hover {
  color: #B1AFAF;
}

.title {
  text-align: left;
  float: left;
}
<body>
  <div class="Navigation">
    <div class="items">
      <li><a class="Navi">Page1</a></li>
      <li><a class="Navi">Page2</a></li>
    </div>
  </div>
  <br>
  <div class="P1">
    <h3 class="title">Ttile</h3>

  </div>

</body>

How can I fix this bug?

Roy
  • 7,811
  • 4
  • 24
  • 47
spider
  • 15
  • 3

2 Answers2

0

You should add some styles to div tag (.P1) like below

.Navigation{
    width:100%;
    height:30%;
    float: center;
    border: 2px solid black;    
}

ul {
  list-style-type: none;
  
}

li {
list-style-type: none;
  
}

a.Navi{
float: left;
}

li a {
  color: black;
background-color:transparent;
  text-align: center;
  padding: 14px 16px;
}

li a:hover {
  color: #B1AFAF;
}

.P1{
    float: left;
    width: 100%;
    text-align: left;
}

.title{
    text-align: left;
    float: left;
}
<div class= "Navigation">
        <div class = "items">
        <li><a class="Navi" >Page1</a></li>
        <li><a class="Navi">Page2</a></li>
        </div>
    </div>
    <br>
    <div class = "P1">
    <h3 class="title">Ttile</h3>
    
    </div>
Yasaman.Mansouri
  • 550
  • 1
  • 3
  • 13
0

Simply, we need to add clearfix Hack..

Like this

.Navigation::after {

  content: "";

  clear: both;

  display: table;
}

Learn More about Clearfix : https://www.w3schools.com/howto/howto_css_clearfix.asp

Md.Usman Ansari
  • 139
  • 6