how to give margin between li using css? - angularjs

Question

]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; }

Answer 1

To increase the spacing between the icons use:
.breadcrumb li a:before {
margin-left: 5px; /* Increase this number for thicker space */
}
But your question is unclear as to the responsiveness. What exactly do you want to achieve?