How do i fix the size of css border?

Question

I am learning html, css and javascript myself, using online tutorials. The css border next to bbc logo is too short. Please tell me why.

Browser:

Code: http://pastebin.com/FWrs084N (this code will always be there)

Answer 1

body{
  margin:0;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
}

#topbar{
  background-color: #CC0101;
  width: 100%;
  height: 40px;
  color: white;
  margin-top: 10px;
}
.fixedwidth{
  width: 1050px;
  margin: 0 auto;
}              
#logodiv{
  padding-right: 10px;
  border-right: 5px solid #DA4C4C;
}
#signindiv{
  font-weight: bold;
  padding: 0 80px 0 20px;
  font-size: 0.9em;       
  border-right: 5px solid #DA4C4C;
}
#topmenudiv ul{
  margin: 0;
  padding:0;
} 
#topmenudiv li{
  list-style: none;
  font-weight: bold;
  font-size: 0.9em;
  border-right: 5px solid #DA4C4C;
  height: 100%;
  padding: 0 20px 8px 20px;
}
.fixedwidth > div {
  display: table-cell;
  vertical-align: middle;
}

<div id="container">
  <div id="topbar">

    <div class="fixedwidth">

      <div id="logodiv">
        <img src="images/logo.png"/>
      </div>

      <div id="signindiv">
        <img src="images/signin.png"/> Sign in
      </div>

      <div id="topmenudiv">
        <ul>
          <li>News</li>
          <li></li>
          <li></li>
        </ul>
      </div>

    </div>

  </div>
</div>

Good luck!

Answer 2

Your padding was slightly off. Check this fiddle

Basically change the property of logodiv from

padding-top: 7px;

to

padding: 6px 80px 12px 20px

To avoid this in the future, you would ideally add a class name which would have the same properties, that way the elements get the consistent styles.