How can I orient divs properly within another div?

Question

I am trying to create a side bar with an animated menu button. I found an example online of the button I imagined and am trying to use it correctly but cant seem to get it where I want on my page. Why do the three divs that make up the animated button appear to the right of the trapezoid and not within it?

    #trap {
     position: absolute;
     left: 0px;
     top; 0px;
     height: 38px;
     width: 40px;
     border-left: 40px solid black; 
     border-bottom: 5px solid transparent;
     border-top: 5px solid transparent;
     margin-left: 0;
     transition: 0.5s;
    }

    .container {
        display: inline-block;
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #A4A4A4;
        margin: 6px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

    <div id="trap" class="container" onclick="toggleNav(this)">
     <div class="bar1"></div>
     <div class="bar2"></div>
     <div class="bar3"></div>
    </div>

Answer 1

The #trap's border-left is pushing the bars to the right. One possible solution is to move the bars back left using position:relative.

UPDATE: the ghost-element was caused by the fact that you have both a border-width and a width on the #trap element. Because browsers' default is to not include the border's width in the width calculation, both were taken into account.

The simplest solution would be just to change width: 40px to width:0px, so that the border's width definition is the only one that's used, but my preferred situation (updated in the snippet) is to change the box-sizing property to border-box. This causes the width property to take into account the element's border width, so the two properties don't add to each other. I also had to increase the height to prevent the bottom from being clipped off.

#trap {
     position: absolute;
     left: 0px;
     top; 0px;
     height: 38px;
     width: 40px;
      box-sizing: border-box;
     border-left: 40px solid black; 
     border-bottom: 5px solid transparent;
     border-top: 5px solid transparent;
     margin-left: 0;
     transition: 0.5s;
    }

    .container {
        display: inline-block;
        cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #A4A4A4;
        margin: 6px 0;
        transition: 0.4s;
        left:-35px;
        position:relative;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

<div id="trap" class="container" onclick="toggleNav(this)">
     <div class="bar1"></div>
     <div class="bar2"></div>
     <div class="bar3"></div>
    </div>