why css break (not taking the height of li)?

I try to make one simple demo using this link I am able to make this as understand better here is demo But when I integrate it my application it break .Mean display half (in form of cut pieces ) .why ? CSS is not applied in that Actually my breadcrumb not display as it display in my demo .I think ionic css is conflict my style css can we make this demo with ionic ? how to resolve this issue ?

here is my live application demo url

[![enter image description here][4]][4]

#my-breadcrumbs ul li {
        list-style:none;
    }

    #my-breadcrumbs {
        margin-top: 44px;
        margin-left: 10px;
    }

    #my-breadcrumbs ul li a {
        display: block;
        float: left;
        height: 25px;
        background: grey;
        text-align: center;
        padding: 15px 20px 0 20px;
        position: relative;
        margin: 0 22.5px 0 0;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 12px;
        text-decoration: none;
        color: #fff;
    }


    #my-breadcrumbs ul li a:after {
        content: "";
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid grey;
        position: absolute; right: -20px; top: 0;
    }


    #my-breadcrumbs ul li a:before {
        content: "";
        position: absolute;

        margin-top: -15px;
        border-width: 20px 0 20px 20px;
        border-style: solid;
        border-color: grey grey grey transparent;
        left: -20px;
    }


    /* Hide the Before Pseudo Element */
    #my-breadcrumbs ul li:first-child a:before {
        display: none; }

    /* Add Border Radius */
    #my-breadcrumbs ul li:first-child a{
     border-bottom-right-radius: 1px;
    }