Nav mobile button moves/messes layout when clicked, to the top and left

[tomasts248]

This is the original position:

and this is what happens when clicking the button

here is the code:

<nav class="navbar navbar-expand-lg navbar-light zbg-light" role="navigation">
	    
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContentMobile" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse text-center" id="navbarSupportedContentMobile">

				<ul class="navbar-nav">
                                    <!-- nav walker code -->

[tomasts248]

This is the full code, should had posted this before I apologize for that

<div class="container-fluid d-flex justify-content-center">

<div class="row flex-fill">
    <div class="col d-flex justify-content-end">

    <nav class="navbar navbar-expand-lg navbar-light zbg-light" role="navigation">
	    
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContentMobile" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
		</button>
                 <div class="collapse text-center" id="navbarSupportedContentMobile">
				<ul class="navbar-nav">