how to give margin between li using css?

]I am trying to make a breadcrumb as shown in the image below. I am able to make this thanks to some Google searching, But I have few issues:

• It is not responsive. Why? when I decrease window width breadrumb also decrease as same as header which work on all resolution .In other words when we decrease width it fontsize and width according to screen resolution
• There is a margin between two li as shown in image. I used the margin property, but it doesn't seem to be effective.

here is my code http://codepen.io/anon/pen/eNPExE

/* Styles go here */
.breadcrumb_nav_div{
  top:44px;
  position:absolute;
  width:100%;
  background-color:lightgrey;
  padding:0.8em 0em 0.5em 1em;
}
.breadcrumb { 
            list-style: none; 
            overflow: hidden; 
            font: 14px Helvetica, Arial, Sans-Serif;
        }
        .breadcrumb li { 
            float: left; 
      margin-left:5px

        }
        .breadcrumb li a {
            color: white;
            text-decoration: none; 
            padding: 10px 0px 10px 55px;
            background: grey;                   /* fallback color */
            background: grey; 
            position: relative; 
            display: block;
            float: left;
        }
        .breadcrumb li a:after { 
            content: " "; 
            display: block; 
            width: 0; 
            height: 0;
            border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
            border-bottom: 50px solid transparent;
            border-left: 30px solid grey;
            position: absolute;
            top: 50%;
            margin-top: -50px; 
            left: 100%;
            z-index: 2; 
        }   
        .breadcrumb li a:before { 
            content: " "; 
            display: block; 
            width: 0; 
            height: 0;
            border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
            border-bottom: 50px solid transparent;
            border-left: 30px solid white;
            position: absolute;
            top: 50%;
            margin-top: -50px; 
            margin-left: 1px;
            left: 100%;
            z-index: 1; 
        }   
        .breadcrumb li:first-child a {
            padding-left: 10px;
        }
        .breadcrumb li:nth-child(2) a       { background:        grey; }
        .breadcrumb li:nth-child(2) a:after { border-left-color: grey; }
        .breadcrumb li:nth-child(3) a       { background: grey; }
        .breadcrumb li:nth-child(3) a:after { border-left-color: grey; }
        .breadcrumb li:nth-child(4) a       { background:grey; }
        .breadcrumb li:nth-child(4) a:after { border-left-color: grey; }