We are working on our Capstone project and two of us are in charge of designing the frontend of the website.
I asked my partner to create the burger for our site. It looks fine on his side but it looks broken on mine.

We are working on the same Github Repo.

here are the pictures:

My side
His side


        <div class="navigation">
            <button class="hamburger" onclick="show()">
                <div id="bar1" class="bar"></div>
                <div id="bar2" class="bar"></div>
                <div id="bar3" class="bar"></div>

                    <li><a href="#main">HOME</a></li>
                    <li><a href="otp.html">REPORT</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="login.html">LOGIN</a></li>


a,button {
    cursor: pointer;

    position: absolute;
    top: 100px;
    left: 50px;
    width: 250px;

.navigation {
    position: fixed;
    margin-top: -475px;
    left: -500px;
    width: 350px;
    height: 100%;
    background-color: #000;
    transition: .5s;

.navigation ul li{
    color: #fff;
    text-align: right;
    text-transform: uppercase;
    list-style-type: none;
    font-size: 1.5em;
    padding: 20px 30px;
    border-bottom: 1pt solid #252525;

.hamburger, .bar{
    position: fixed;

    display: block;
    top: 5%;
    right: 95%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border: 0;
    background: 0 0;

    top: 3px;
    background: #000;
    width: 100%;
    height: 4px;
    transition: all .3s ease-in;

    top: 11px;

    top: 19px;

    left: 0;

.hamburger.open #bar1{
    background-color: #fff;
    transform: rotate(45deg) translate(6px, 5px);

.hamburger.open #bar2{
    background-color: transparent;

.hamburger.open #bar3{
    background-color: #fff;
    transform: rotate(-45deg) translate(6px, -5px);

New contributor

PEE WOOP is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.