How do I centre the text of the links in this boostrap navbar when it collapses? : I want the links in the dropdown to be centred.

```HTML

<nav class="navbar navbar navbar-expand-lg fixed-top bg clean-navbar">
        <div class="container logo" style="position: relative;"><a class="navbar-brand text-left d-block float-left d-xl-flex logo" href="assets/img/kol-logoldpi.svg"><img class="kibrislogo" height="50" src='assets/img/kol-logoldpi2.svg'/></a><button class="navbar-toggler"  data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item" role="presentation"><a class="nav-link active" href="index.html">Paketler</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="features.html">Kampanyalar</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="pricing.html">sss</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="about-us.html">Hizmet Noktalari</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html"><strong>İLETIŞIM</strong></a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html" style="color: rgba(207,14,14,0.5);">TR/ENG</a></li>
                </ul>
            </div>
            <img class="logo" style="position: absolute; right: -7%; height: 70px;" src="assets/img/kol-ccldpi.svg" alt="">
        </div>
    </nav>

```
The text is shifted to the left as you can see.