Javascript changed the width of my website and some styles for the social links

Hello,

I am trying to add a custom nav into our site but it seems when I add the script into the code injection footer the width of my website changes. I have tried these solutions:

#page.container {
  padding: unset!important;
}

.container {
  padding: inherit;
}

But they do not seem to work. I don't know much about bootstrap or java so I am a bit out of my element. this is the script I have inputed:

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

I have attached a image of what it is doing when the above code is injected. If someone would be able to assist me that would be amazing. 

Cheers