Wsrtjtyk

I have been struggling with this one for days now, any help to sort this out would be greatly appreciated. I need the hamburger icon on the right side, contact picture with phone number on it in the middle ad brand logo on the left. For some reason toggler is getting pushed outside its col-3 grid. I am using bootstrap 4.

 <header>

        <div class="container-fluid">

            <div class="row">

                <div class="col-5 col-sm-4 col-md-5 col-lg-4 col-xl-4">

                    <img class="logo img-fluid" src="/img/logo.png" alt="logo">

                </div>

                <div class="col-4 col-sm-5 col-md-5 col-lg-4 col-xl-3">

                    <div class="tel-icon">

                        <img class="contact img-fluid" src="/img/contact.png" alt="contact-icon">

                    </div>

                </div>

                <div class="col-3 col-sm-3 col-md-2 col-lg-4 col-xl-4">

                    <nav class="navbar navbar-expand-lg bg-none">

                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"

                                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle Navigation">

                            <i class="fas fa-bars"></i>    

                        </button>



                        <div class="collapse navbar-collapse" id="navbarResponsive">

                            <ul class="navbar-nav ml-auto">

                                <li class="nav-item active">

                                    <a class="nav-link home" href="#">HOME</a>

                                </li>

                                <li class="nav-item">

                                    <a class="nav-link security-services" href="#">SECURITY SERVICES</a>

                                </li>

                                <li class="nav-item">

                                    <a class="nav-link contact-us" href="#">CONTACT US</a>

                                </li>

                            </ul>

                        </div>

                    </nav>

                </div>

            </div>

        </div>

    </header>









/////////collapsed nav//////////

@media (min-width: 601px) and (max-width: 991px) {

    .fa-bars {

        transform: scale(2.2, 1.3);

        -webkit-transform: scale(2.2, 1.3); /* Safari and Chrome */

        -moz-transform: scale(2.2, 1.3); /* Firefox */

        -ms-transform: scale(2.2, 1.3); /* IE 9+ */

        -o-transform: scale(2.2, 1.3); /* Opera */

        color: white;

        margin: 15px -30px 10px 20px;

    }



    .navbar-nav {

        background-color: white;

        margin: 5px 50px 30px 0px;

    }

    .navbar-nav a {

        color: #6d3093;

    }

}

@media (max-width: 600px) {

    .fa-bars {

        transform: scale(2.0, 1.2);

        -webkit-transform: scale(2.0, 1.2); /* Safari and Chrome */

        -moz-transform: scale(2.0, 1.2); /* Firefox */

        -ms-transform: scale(2.0, 1.2); /* IE 9+ */

        -o-transform: scale(2.0, 1.2); /* Opera */

        margin: 15px -30px 10px 20px;

    }

    .navbar-toggler {

        color: white;

        margin-right: 90px;

    }

    .navbar-nav {

        background-color: white;

        margin-top: 18px;

    }



    .navbar-nav a {

        color: #6d3093;

    }

Is this that you were looking for codepen

           <div class="col-4 col-sm-5 col-md-5 col-lg-4 col-xl-4 d-flex justify-content-center">

                <div class="tel-icon">

                    <img class="contact img-fluid" src="/img/contact.png" alt="contact-icon">

                </div>

            </div>

            <div class="col-3 col-sm-3 col-md-2 col-lg-4 col-xl-4 d-flex justify-content-end">