Problems with Clearfix

Question

I've been having trouble applying clearfix to a number of divs, I've followed several tutorials, found here and here, but still my div named Bar will not expand to hold both the logo and nav divs.

Here is my markup, any and all advice would be greatly appreciated. I have made the divs some strange colours to help see where they are ending and help with trying to see what is going on exactly.

<div id="bar" class="group">
    <div id="nav">
        <ul>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>What We Do</li></a>
            <a href="#"><li>Our Work</li></a>
            <a href="#"><li>Our People</li></a>
            <a href="#"><li>Contact Us</li></a>
        </ul>
    </div>
    <div id="logo">
        <img src="images/logo.png" title=""    alt="" />
    </div><!--Close Logo-->

CSS:

body{
  margin:0;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

#bar{
  background-color: #e2871a;
  width:100%;
}

/*NAVIGATION */
#nav{
  color:#fff;
  float:right;
  margin-right:50px;
  background-color:chartreuse;
}

#nav>ul{
  list-style:none;
  padding:0;
  margin:0;
}

#nav>ul li{
  display:inline;
}

#nav>ul a>li {
  color:#fff;
  padding-bottom:100px;
  background-color:blue;
  margin-right:15px;
}

#nav>ul a>li:hover{
  border-bottom:3px solid white;
} 

#logo{
  float:left;
  width:15%;
  margin-left:5%;
  background-color:red;
}

Answer 1

Problem is:

#nav>ul li{
   display: inline;
}

Top/bottom padding or margin doesn't affect the height of inline elements relative to their parent. Make it block or inline-block