title: Bootstrap causing navbar CSS to freak out
body: <p>I'm trying to learn some HTML, CSS and JS and I came across a strange error using Bootstrap that seems to cause an issue with my navigation bar links.</p>
  <p>The CSS I'm using myself is this: <a href="https://pastebin.com/naVZuzaG" rel="nofollow noreferrer">https://pastebin.com/naVZuzaG</a></p>
  <p>Here's the code for the contact page which features a Bootstrap Forms-component (as a test): <a href="https://pastebin.com/dGGPxhNT" rel="nofollow noreferrer">https://pastebin.com/dGGPxhNT</a></p>
  <p>On line 34, there is a field for inputting your e-mail which looks like this, and that line seems to mess up the navigation links (they come &quot;flying&quot; in from top right when the page is loaded):</p>
  <pre><code>      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;inputEmail&quot; aria-describedby=&quot;emailHelp&quot; required/&gt;
  </code></pre>
  <p>Strangely, this only occurs when the page is online, locally on my machine this error is not present. Can anyone suggest why this happens so I know how to prevent it?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Styling for the top navigation bar */
  .topnav {
      overflow: hidden;
      background-color: black;
  }
  .topnav img {
      position: relative;
      float: left;
      padding-top: 7px;
      padding-left: 20%;
  }
  .topnav ul {
      list-style: none;
      padding: 0px 20%;
  }
  
  /* Styling for links in navbar below */
  .activelink {
      background-color: white;
      color: black !important;
  }
  .navlist a, select {
      font-family: 'Alata', sans-serif;
      color: white;
      float: right;
      padding: 16px 20px;
      text-align: center;
      text-transform: uppercase;
      transition-timing-function: linear;
      transition-duration: 600ms; 
  }
  .navlist a:hover {
      background-color: white; 
      color: black;
  } 
  
  /* Main body style and main content styles below*/
  body {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: white;
  }
  .page-container {
      position: relative;
      min-height: 100vh;
  }
  .maincontent {
      padding: 30px;
  }
  article {
      width: 40%;
      margin-left: auto;
      margin-right: auto;
  }
  
  article small {
      text-align: center;
      padding-top: 10px;
  }
  
  /* Header styles */
  h1  {
      font-family: 'Alata', sans-serif;
      text-align: center;
      padding-top: 40px;
      padding-bottom: 20px;
  }
  
  h2, h3, h4, h5, h6 {
      font-family: 'Alata', sans-serif;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 20px;
  }
  
  /*Footer styles below*/
  footer {
      position: absolute;
      height: 3rem;
      bottom: 0;
      width: 100%;
      background-color: black;
  }
  footer p {
      font-family: 'Alata', sans-serif;
      color: white;
      text-align: center;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
  }
  
  /*Extra styling used on the contact form below*/
  label {
      font-family: 'Alata', sans-serif;
  }
  .form-control {
      max-height: 300px;
  }
  .btn-primary {
      background-color: black;
  }
  .btn-primary:hover {
      background-color: white; 
      color: black;
      border-color: rgb(83, 80, 80);
  }
  
  /*Extra styling for gallery images*/
  #imgg {
      display: block;
      margin-left: auto;
      margin-right: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;!-- This is the header of the webpage --&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
      &lt;!-- Links to stylesheets and title --&gt;
          &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alata&amp;display=swap"&gt; 
          &lt;link rel="stylesheet" type="text/css" href="styles/main.css"&gt;
          &lt;title&gt;Testsite&lt;/title&gt;
      &lt;/head&gt;
      &lt;!-- This is the body of the webpage --&gt;
      &lt;body&gt;
          &lt;div class ="page-container"&gt;
              &lt;header class="header"&gt;
                  &lt;!-- This is the top navigation on the webpage--&gt;
                  &lt;nav class="topnav"&gt;
                      &lt;a href="index.html"&gt;&lt;img src="images/smallogo.png" alt="Logo that says Desert Water Corp" class="logo"&gt;&lt;/a&gt;
                      &lt;ul class="navlist"&gt;
                          &lt;li&gt;&lt;a class ="activelink" href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
                  &lt;!-- End of navigation, start of main content section --&gt;
                  &lt;!-- Contact form from Bootstrap --&gt;
                  &lt;div class="maincontent"&gt;
                      &lt;h1&gt;Get in touch&lt;/h1&gt;
                      &lt;article&gt;
                      &lt;form action="mailto:fakeemail@fakeemail.com" method="post" enctype="text/plain" class="form-container"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="email-address"&gt;Email address&lt;/label&gt;
                              &lt;input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" required/&gt;
                              &lt;small id="emailHelp" class="form-text text-muted"&gt;&lt;em&gt;We will never share your email with anyone else.&lt;/em&gt;&lt;/small&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="message"&gt;Message&lt;/label&gt;
                              &lt;textarea class="form-control" id="subject" rows="13" placeholder="Write your message here..."&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                          &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                      &lt;/article&gt;
                  &lt;/div&gt;
                  &lt;!-- End of main content section, start of footer --&gt;
                  &lt;footer id="footer"&gt;
                      &lt;p&gt;Copyright © 2020 Desert Water Corp&lt;/p&gt;
                  &lt;/footer&gt;
              &lt;/header&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>