Navbar shift to right when you open modal

Navbar shift to right when open model.Help me please))this is my code: <header> <!--Navbar--> <nav id="navbarId" class="navbar navbar-expand-lg red darken-4 navbar-dark fixed-top scrolling-navbar"> <divclass="container"> <!-- Navbar brand --> <aclass="navbar-brand"href="#">FC Liverpool</a> <!-- Collapse button --> <buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#basicExampleNav"aria-controls="basicExampleNav" aria-expanded="false"aria-label="Toggle navigation"> <spanclass="navbar-toggler-icon"></span> </button> <!-- Collapsible content --> <divclass="collapse navbar-collapse"id="basicExampleNav"> <!-- Links --> <ulclass="navbar-nav mr-auto"> <liclass="nav-item active"> <aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span> </a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">News</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Match</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Anfield</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">History</a> </li> </ul> <!-- Links --> <ahrefclass="btn btn-white btn-sm"data-toggle="modal"data-target="#modalLRForm">Login</a> </div> <!-- Collapsible content --> </div> </nav> <!--/.Navbar--> </header> <divclass="bgClass"style="background-image: url(myImages/bg5.jpg);"> </div> <main> <!--Modal: Login / Register Form--> <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <divclass="modal-dialog cascading-modal"role="document"> <!--Content--> <divclass="modal-content"> <!--Modal cascading tabs--> <divclass="modal-c-tabs"> <!-- Nav tabs --> <ulclass="nav nav-tabs tabs-2 red darken-3"role="tablist"> <liclass="nav-item"> <aclass="nav-link active"data-toggle="tab"href="#panel7"role="tab"><iclass="fa fa-user mr-1"></i> Login</a> </li> <liclass="nav-item"> <aclass="nav-link"data-toggle="tab"href="#panel8"role="tab"><iclass="fa fa-user-plus mr-1"></i> Register</a> </li> </ul> <!-- Tab panels --> <divclass="tab-content"> <!--Panel 7--> <divclass="tab-pane fade in show active"id="panel7"role="tabpanel"> <!--Body--> <divclass="modal-body mb-1"> <divclass="md-form form-sm mb-5"> <iclass="fa fa-envelope prefix"></i> <inputtype="email"id="modalLRInput10"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput10">Your email</label> </div> <divclass="md-form form-sm mb-4"> <iclass="fa fa-lock prefix"></i> <inputtype="password"id="modalLRInput11"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput11">Your password</label> </div> <divclass="text-center mt-2"> <buttonclass="btn btn-red">Log in <iclass="fa fa-sign-in ml-1"></i></button> </div> </div> <!--Footer--> <divclass="modal-footer"> <divclass="options text-center text-md-right mt-1"> <p>Not a member? <ahref="#"class="blue-text">Sign Up</a></p> <p>Forgot <ahref="#"class="blue-text">Password?</a></p> </div> <buttontype="button"class="btn btn-outline-red waves-effect ml-auto"data-dismiss="modal">Close</button> </div> </div> <!--/.Panel 7--> <!--Panel 8--> <divclass="tab-pane fade"id="panel8"role="tabpanel"> <!--Body--> <divclass="modal-body"> <divclass="md-form form-sm mb-5"> <iclass="fa fa-envelope prefix"></i> <inputtype="email"id="modalLRInput12"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput12">Your email</label> </div> <divclass="md-form form-sm mb-5"> <iclass="fa fa-lock prefix"></i> <inputtype="password"id="modalLRInput13"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput13">Your password</label> </div> <divclass="md-form form-sm mb-4"> <iclass="fa fa-lock prefix"></i> <inputtype="password"id="modalLRInput14"class="form-control form-control-sm validate"> <labeldata-error="wrong"data-success="right"for="modalLRInput14">Repeat password</label> </div> <divclass="text-center form-sm mt-2"> <buttonclass="btn btn-red">Sign up <iclass="fa fa-sign-in ml-1"></i></button> </div> </div> <!--Footer--> <divclass="modal-footer"> <divclass="options text-right"> <pclass="pt-1">Already have an account? <ahref="#"class="blue-text">Log In</a></p> </div> <buttontype="button"class="btn btn-outline-red waves-effect ml-auto"data-dismiss="modal">Close</button> </div> </div> <!--/.Panel 8--> </div> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Login / Register Form--> </main> This is my style.css code: body, html { height: 100%; } .bgClass { /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }

---