No idea why my border-bottom not working can someone please solve it

Question

I created a nav bar but my border-bottom not working , it is working as a border-top instead. I am trying to create a nav bar like twitter for learning. It will be a great help if someone helps me to solve it

*{
 margin: 0px;
 padding: 0px;
}

.header{
 width: 100%;
 height: auto;
 border-bottom:  1px solid #dae0e4;
}
.container{
 width: 90%;
 margin: 10px auto;
}
.main-nav{
 width: 50%;
 float: left;
}
.second-nav{
 float: right;
}
ul {
  list-style-type: none;
  overflow: hidden;
}
li {
  float: left;
  font-size: 120%;
}
li a {
 color: #6f7d87;
 display: block;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}
.body{
 clear: both;
}

<!DOCTYPE html>
<html>
<head>
 <title>Twitter</title>
 <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
 <div class="page">
  <div class="header">
   <div class="container">
    <div class="main-nav">
     <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Notification</a></li>
      <li><a href="">Messages</a></li>
     </ul>
    </div>
    <div class="second-nav">
     <ul>
      <li><a href="">Search Bar</a></li>
      <li><a href="">Profile</a></li>
      <li><a href="">Tweet</a></li>
     </ul>
    </div>
   </div>  
  </div>
  <div class="body">
   <p>Something</p>
  </div>
 </div>
</body>
</html>

I expect the border to show the lining downside but it is showing it upside, I couldn't find the solution anywhere on the web and also I was unable to fix it.

Akshay · Answer 1 · 2019-05-26T13:54:48.257

The border did appear, but visually on top of the header.

This is because the child elements of .header are floated and hence the height of .header becomes zero. To avoid this, add a clearfix to .header. Here I've used overflow:auto to fix it.

* {
  margin: 0px;
  padding: 0px;
}

.header {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #000;
}

.container {
  width: 90%;
  margin: 10px auto;
  overflow: auto;
}

.main-nav {
  width: 50%;
  float: left;
}

.second-nav {
  float: right;
}

ul {
  list-style-type: none;
  overflow: hidden;
}

li {
  float: left;
  font-size: 120%;
}

li a {
  color: #6f7d87;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.body {
  clear: both;
}

<div class="page">
  <div class="header">
    <div class="container">
      <div class="main-nav">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Notification</a></li>
          <li><a href="">Messages</a></li>
        </ul>
      </div>
      <div class="second-nav">
        <ul>
          <li><a href="">Search Bar</a></li>
          <li><a href="">Profile</a></li>
          <li><a href="">Tweet</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="body">
    <p>Something</p>
  </div>
</div>

@user11437679 There is no `overflow:hidden`, you just have to add `overflow:auto` to fix the height. You can check this link https://stackoverflow.com/questions/8554043/what-is-a-clearfix to see other methods to fix it. — Akshay, May 26 '19 at 13:51

No idea why my border-bottom not working can someone please solve it

1 Answers1