'Why is my drop-down nav bar displaying behind webpage content on some pages?

I am working on some web pages for a class project and noticed that in two of my webpages the drop-down nav bar displays properly over the content on my web page, but in the other two pages the web content appears over the drop-down nav bar. Trying to figure out why that is. I also noticed that my footer displays correctly on the bottom of the page in the first example but doesn't display correctly on the bottom of the page in the second example and am not sure why. I'll include the code for both the incorrect and correct display. INCORRECT DROP DOWN BUT CORRECT FOOTER:

body {
  background-color: whitesmoke;
}


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Headings */

h1 {
  color: #067393;
  font-family: athelas;
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  text-align: center;
  letter-spacing: 3px;
}

h2 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
}

h3 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 24px;
}

h4 {
  color: #bc0456;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 36px;
  margin-bottom: 0%;
}


/* Homepage Image */


/* Container holding the image and the text */

.home_container {
  padding: 50px;
  position: relative;
  text-align: center;
  background-color: #f99a61;
  height: 500px;
}

.box {}

.home_image {
  width: 50%;
}


/* Centered text */

.home_container2 {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  position: relative;
  text-align: center;
  background-color: lightblue;
  max-height: 500px;
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="Keywords" content="Portoflio, Alexandria's portfolio, graphic design, web development.">
  <meta name="Description" content="This is Alexandria's portfolio.">
  <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
  <title>MY Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.typekit.net/dmw1ifs.css">
  <link href="css/stylesheet.css" rel="stylesheet" type="text/css">

  <!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/b ootstrap.min.css" integrity="sha384- 9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7 Sk" crossorigin="anonymous">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">

link to your own stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>

<body>
  <!--This is the body. The body contains the webpage contents such as the mission statement and vision. -->
  <header>
    <section class="header">

      <div class="header_content">
        <div class="logo_container">
          <a href="index.html">
            <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
          </a>


        </div>

        <ul class="navigation">
          <li><a href="index.html">Home</a></li>
          <li><a href="portfolio2.html">Portfolio</a>
            <div class="sub_menu1">
              <ul>
                <li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li>
                <li><a href="Menu Designs.pdf">Menu Designs</a></li>
              </ul>

            </div>
          </li>
          <li><a href="About_Me2.html">About ME</a>
            <li><a href="contact2.html">Contact</a></li>

        </ul>
      </div>

    </section>

  </header>

  <main>
    <h1><b><i>ArtUcii Designs</i></b></h1>
    <!--This is a heading containing title of webpage. -->

    <section class="home_container">
      <div class="box"></div>
      <img alt="Design" class="home_image" src="images/ArtUcii_Final_RGB.jpg">

    </section>


    <section>

      <h1><b><i>By Alexandria</i></b></h1>
    </section>
  </main>

  <section class="home_container2">
    <div class="Welcome">
      <h2>Here to turn your creative visions into reality!</h2>
      <h3> Specaializing in logo design, menus, websites, and artistic graphics and prints. ArtUcii is here to deliver </h3>
      <br>
      <h4>ART YOU CAN SEE</h4>
      <br>
      <h3> all your business and artistic needs.</h3>

    </div>

  </section>
  <br><br>




  <br><br>


  <footer>
    <section class="footer">
      <div class="footer_content">

      </div>

    </section>

  </footer>
</body>






<!-- JS, Popper.js, and jQuery 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/poppe r.min.js" integrity="sha384- Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384- OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-->

</html>

CORRECT DROPDOWN BUT INCORRECT FOOTER:

@charset "UTF-8";

/* CSS Document */


/* About ME */


/* Google Font CDN Link */


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Body */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.content .left-side::before {
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}

.content .left-side .details {
  margin: 14px;
  text-align: center;
}

.content .left-side .details i {
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}

.content .left-side .details .topic {
  font-size: 18px;
  font-weight: 500;
}

.content .left-side .details .text-one,
.content .left-side .details .text-two {
  font-size: 14px;
  color: #afafb6;
}

.container .content .right-side {
  width: 75%;
  margin-left: 75px;
}

.content .right-side .topic-text {
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}

.right-side .input-box {
  height: 50px;
  width: 100%;
  margin: 12px 0;
}

.right-side .input-box input,
.right-side .input-box textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}

.right-side .message-box {
  min-height: 110px;
}

.right-side .input-box textarea {
  padding-top: 6px;
}

.right-side .button {
  display: inline-block;
  margin-top: 12px;
}

.right-side .button input[type="button"] {
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="button"]:hover {
  background: #bc0456;
}

@media (max-width: 950px) {
  .container {
    width: 90%;
    padding: 30px 40px 40px 35px;
  }
  .container .content .right-side {
    width: 75%;
    margin-left: 55px;
  }
}

@media (max-width: 820px) {
  .container {
    margin: 40px 0;
    height: 100%;
  }
  .container .content {
    flex-direction: column-reverse;
  }
  .container .content .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container .content .left-side::before {
    display: none;
  }
  .container .content .right-side {
    width: 100%;
    margin-left: 0;
  }
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="Portoflio, Alexandria's portfolio, graphic design, web development.">
  <meta name="Description" content="This is Alexandria's portfolio.">
  <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
  <title>Contact</title>
  <!-- <title> Responsive Contact Us Form  | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>

<body>

  <header class="header">


    <div class="header_content">
      <div class="logo_container">
        <a href="index.html">
          <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
        </a>


      </div>

      <ul class="navigation">
        <li><a href="index.html">Home</a></li>
        <li><a href="portfolio2.html">Portfolio</a>
          <div class="sub_menu1">
            <ul>
              <li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li>
              <li><a href="Menu Designs.pdf">Menu Designs</a></li>
            </ul>

          </div>
        </li>
        <li><a href="About_Me2.html">About ME</a>
          <li><a href="contact2.html">Contact</a></li>

      </ul>
    </div>



  </header>
  <br><br>
  <div class="wrapper">

    <div class="container">

      <div class="content">
        <div class="left-side">
          <div class="address details">
            <i class="fas fa-map-marker-alt"></i>
            <div class="topic">Address</div>
            <div class="text-one">Los Angles, CA</div>
            <div class="text-two">Austin,TX</div>
          </div>
          <div class="phone details">
            <i class="fas fa-phone-alt"></i>
            <div class="topic">Phone</div>
            <div class="text-one">(512) xxx-xxxx</div>
            <div class="text-two">+</div>
          </div>
          <div class="email details">
            <i class="fas fa-envelope"></i>
            <div class="topic">Email</div>
            <div class="text-one">[email protected]</div>
            <div class="text-two">[email protected]</div>
          </div>
        </div>
        <div class="right-side">
          <div class="topic-text">Send me a message!</div>
          <br>
          <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
          <form action="#">
            <div class="input-box">
              <input type="text" placeholder="Enter your name">
            </div>
            <div class="input-box">
              <input type="text" placeholder="Enter your email">
            </div>
            <div class="input-box message-box">

            </div>
            <div class="button">
              <input type="button" value="Send Now">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <footer>
    <section class="footer">
      <div class="footer_content">

      </div>

    </section>

  </footer>
</body>

</html>

html css

Solution 1:^[1]

Your first example can be fixed with a higher z-index on your dropdown menu:

body {
  background-color: whitesmoke;
}


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  z-index: 10;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Headings */

h1 {
  color: #067393;
  font-family: athelas;
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  text-align: center;
  letter-spacing: 3px;
}

h2 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
}

h3 {
  color: #067393;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 24px;
}

h4 {
  color: #bc0456;
  font-family: athelas, serif;
  font-style: normal;
  font-size: 36px;
  margin-bottom: 0%;
}


/* Homepage Image */


/* Container holding the image and the text */

.home_container {
  padding: 50px;
  position: relative;
  text-align: center;
  background-color: #f99a61;
  height: 500px;
}

.box {}

.home_image {
  width: 50%;
}


/* Centered text */

.home_container2 {
  padding: 10px;
  display: flex;
  justify-content: space-around;
  position: relative;
  text-align: center;
  background-color: lightblue;
  max-height: 500px;
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="Keywords" content="Portoflio, Alexandria's portfolio, graphic design, web development.">
  <meta name="Description" content="This is Alexandria's portfolio.">
  <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
  <title>MY Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.typekit.net/dmw1ifs.css">
  <link href="css/stylesheet.css" rel="stylesheet" type="text/css">

  <!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/b ootstrap.min.css" integrity="sha384- 9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7 Sk" crossorigin="anonymous">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">

link to your own stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>

<body>
  <!--This is the body. The body contains the webpage contents such as the mission statement and vision. -->
  <header>
    <section class="header">

      <div class="header_content">
        <div class="logo_container">
          <a href="index.html">
            <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
          </a>


        </div>

        <ul class="navigation">
          <li><a href="index.html">Home</a></li>
          <li><a href="portfolio2.html">Portfolio</a>
            <div class="sub_menu1">
              <ul>
                <li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li>
                <li><a href="Menu Designs.pdf">Menu Designs</a></li>
              </ul>

            </div>
          </li>
          <li><a href="About_Me2.html">About ME</a>
            <li><a href="contact2.html">Contact</a></li>

        </ul>
      </div>

    </section>

  </header>

  <main>
    <h1><b><i>ArtUcii Designs</i></b></h1>
    <!--This is a heading containing title of webpage. -->

    <section class="home_container">
      <div class="box"></div>
      <img alt="Design" class="home_image" src="images/ArtUcii_Final_RGB.jpg">

    </section>


    <section>

      <h1><b><i>By Alexandria</i></b></h1>
    </section>
  </main>

  <section class="home_container2">
    <div class="Welcome">
      <h2>Here to turn your creative visions into reality!</h2>
      <h3> Specaializing in logo design, menus, websites, and artistic graphics and prints. ArtUcii is here to deliver </h3>
      <br>
      <h4>ART YOU CAN SEE</h4>
      <br>
      <h3> all your business and artistic needs.</h3>

    </div>

  </section>
  <br><br>




  <br><br>


  <footer>
    <section class="footer">
      <div class="footer_content">

      </div>

    </section>

  </footer>
</body>






<!-- JS, Popper.js, and jQuery 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/poppe r.min.js" integrity="sha384- Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384- OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-->

</html>

Your footer displays fine in the first example because its markup isn't present in the second example.

@charset "UTF-8";

/* CSS Document */


/* About ME */


/* Google Font CDN Link */


/* Header */

.header {
  width: 100%;
  height: 50px;
  display: block;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.header_content {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
  border: none;
}

.logo {
  max-height: 50px;
  display: table-cell;
  vertical-align: middle;
}


/* Navigation */

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation li {
  float: left;
  height: 100%;
  display: table-cell;
  padding: 15px 20px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

a:hover {
  color: #bc0456 !important;
}

.navigation li a {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none !important;
}

.sub_menu1 {
  display: none;
}

.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  background: lightblue;
  top: 100%;
}

.navigation li:hover .sub_menu1 ul {
  display: inline-block;
  margin: 0%;
  padding: 0%;
  text-align: center;
}

.navigation li:hover .sub_menu1 ul li {
  padding: 5px;
}


/* Body */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  width: 100%;
  background: #f99a61;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 85%;
  background: #fff;
  border-radius: 6px;
  padding: 20px 60px 30px 40px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.container .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container .content .left-side {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  position: relative;
}

.content .left-side::before {
  content: '';
  position: absolute;
  height: 70%;
  width: 2px;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  background: #afafb6;
}

.content .left-side .details {
  margin: 14px;
  text-align: center;
}

.content .left-side .details i {
  font-size: 30px;
  color: #067393;
  margin-bottom: 10px;
}

.content .left-side .details .topic {
  font-size: 18px;
  font-weight: 500;
}

.content .left-side .details .text-one,
.content .left-side .details .text-two {
  font-size: 14px;
  color: #afafb6;
}

.container .content .right-side {
  width: 75%;
  margin-left: 75px;
}

.content .right-side .topic-text {
  font-size: 23px;
  font-weight: 600;
  color: #bc0456;
}

.right-side .input-box {
  height: 50px;
  width: 100%;
  margin: 12px 0;
}

.right-side .input-box input,
.right-side .input-box textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: #F0F1F8;
  border-radius: 6px;
  padding: 0 15px;
  resize: none;
}

.right-side .message-box {
  min-height: 110px;
}

.right-side .input-box textarea {
  padding-top: 6px;
}

.right-side .button {
  display: inline-block;
  margin-top: 12px;
}

.right-side .button input[type="button"] {
  color: #fff;
  font-size: 18px;
  outline: none;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  background: #067393;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button input[type="button"]:hover {
  background: #bc0456;
}

@media (max-width: 950px) {
  .container {
    width: 90%;
    padding: 30px 40px 40px 35px;
  }
  .container .content .right-side {
    width: 75%;
    margin-left: 55px;
  }
}

@media (max-width: 820px) {
  .container {
    margin: 40px 0;
    height: 100%;
  }
  .container .content {
    flex-direction: column-reverse;
  }
  .container .content .left-side {
    width: 100%;
    flex-direction: row;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container .content .left-side::before {
    display: none;
  }
  .container .content .right-side {
    width: 100%;
    margin-left: 0;
  }
}


/* Footer */

.footer {
  width: 100%;
  height: 100px;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
  position: relative;
}

.footer_content {
  display: flex;
  height: 100px;
  text-align: center;
}

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="Portoflio, Alexandria's portfolio, graphic design, web development.">
  <meta name="Description" content="This is Alexandria's portfolio.">
  <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
  <title>Contact</title>
  <!-- <title> Responsive Contact Us Form  | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
  <link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>

<body>

  <header class="header">


    <div class="header_content">
      <div class="logo_container">
        <a href="index.html">
          <img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
        </a>


      </div>

      <ul class="navigation">
        <li><a href="index.html">Home</a></li>
        <li><a href="portfolio2.html">Portfolio</a>
          <div class="sub_menu1">
            <ul>
              <li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li>
              <li><a href="Menu Designs.pdf">Menu Designs</a></li>
            </ul>

          </div>
        </li>
        <li><a href="About_Me2.html">About ME</a>
          <li><a href="contact2.html">Contact</a></li>

      </ul>
    </div>



  </header>
  <br><br>
  <div class="wrapper">

    <div class="container">

      <div class="content">
        <div class="left-side">
          <div class="address details">
            <i class="fas fa-map-marker-alt"></i>
            <div class="topic">Address</div>
            <div class="text-one">Los Angles, CA</div>
            <div class="text-two">Austin,TX</div>
          </div>
          <div class="phone details">
            <i class="fas fa-phone-alt"></i>
            <div class="topic">Phone</div>
            <div class="text-one">(512) xxx-xxxx</div>
            <div class="text-two">+</div>
          </div>
          <div class="email details">
            <i class="fas fa-envelope"></i>
            <div class="topic">Email</div>
            <div class="text-one">[email protected]</div>
            <div class="text-two">[email protected]</div>
          </div>
        </div>
        <div class="right-side">
          <div class="topic-text">Send me a message!</div>
          <br>
          <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
          <form action="#">
            <div class="input-box">
              <input type="text" placeholder="Enter your name">
            </div>
            <div class="input-box">
              <input type="text" placeholder="Enter your email">
            </div>
            <div class="input-box message-box">

            </div>
            <div class="button">
              <input type="button" value="Send Now">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <footer>
    <section class="footer">
      <div class="footer_content">

      </div>

    </section>

  </footer>
</body>

</html>

I have no idea why, but I've spent a few hours overhauling your HTML & CSS. If you want me to explain some things leave a comment.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: #f99a61;
}

header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

header a {
  all: unset;
}

a:hover,
a:focus {
  color: #bc0456;
}

nav>ul {
  display: flex;
  flex-flow: row wrap;
}

nav ul {
  list-style: none;
}

nav li {
  position: relative;
  cursor: pointer;
  padding: 1rem 1.2rem;
  color: #067393;
  font-family: Kapelka New;
  text-decoration: none;
}

.logo {
  display: block;
  max-height: 50px;
}

.sub_menu1 {
  display: none;
  position: absolute;
  z-index: 10;
  background: lightblue;
  top: 100%;
  left: 0;
  text-align: center;
}

nav li:is(:hover,
 :focus,
 :active) .sub_menu1 {
  display: block;
}

nav li:focus-visible {
  outline: 2px solid #bc0456;
}

main {
  display: grid;
  max-width: 100%;
  background: white;
  padding: .5rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.contact input,
.contact textarea {
  all: unset;
  background: #F0F1F8;
  border-radius: 6px;
  padding: .3em .6em;
  margin-block: .2em;
  resize: none;
}

.contact input[type="submit"] {
  all: unset;
  cursor: pointer;
  font-size: 1.1rem;
  padding: .4em .8em;
  border-radius: 6px;
  background-color: #067393;
  color: #fff;
  transition: all 0.3s ease;
}

.contact input[type="submit"]:hover {
  background: #bc0456;
}

address {
  all: unset;
}

address>div {
  padding: 1em .2em;
}

address h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #bc0456;
}

address a {
  color: inherit;
  text-decoration: none;
}

address a:hover {
  color: #bc0456;
}

footer {
  min-height: 100px;
  text-align: center;
  background-color: #61d1e2;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(#e7bddc, #61d1e2);
}

@media (min-width: 35rem) {
  main {
    margin: 4rem 2rem;
    border-radius: 6px;
    padding: 2rem;
  }
}

@media (min-width: 60rem) {
  main {
    grid-template-columns: 3fr 2fr;
    gap: 1rem;
  }
  address {
    padding-left: 1rem;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<header>
  <a class="logo" href="index.html">
    <img alt="ArtUcii logo" src="images/Artucii_logo.png">
  </a>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li tabindex="0">Portfolio
        <ul class="sub_menu1">
          <li><a href="portfolio2.html">Portfolio</a></li>
          <li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li>
          <li><a href="Menu Designs.pdf">Menu Designs</a></li>
        </ul>
      </li>
      <li><a href="About_Me2.html">About ME</a></li>
      <li><a href="contact2.html">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <article class="contact">
    <h2>Send me a message!</h2>
    <p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
    <form action="#">
      <label for="name">Name:</label><br />
      <input name="name" type="text" placeholder="John Doe"><br />
      <label for="email">Email:</label><br />
      <input name="email" type="text" placeholder="[email protected]"><br />
      <label for="message">Message:</label><br />
      <textarea name="message" cols="30" rows="6" placeholder="Message here"></textarea><br />
      <input type="submit" value="Send Message">
    </form>
  </article>
  <address>
    <div class="location">
      <i class="fas fa-map-marker-alt"></i>
      <h2>Address</h2>
      Los Angles, CA<br />
      Austin,TX
    </div>
    <div class="phone">
      <i class="fas fa-phone-alt"></i>
      <h2>Phone</h2>
      (512) xxx-xxxx<br />
      +
    </div>
    <div class="email">
      <i class="fas fa-envelope"></i>
      <h2>Email</h2>
      <a href="mailto:[email protected]">[email protected]</a><br />
      <a href="mailto:[email protected]">[email protected]</a>
    </div>
  </address>
</main>
<footer>
  <div class="footer_content">
    Footer
  </div>
</footer>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Why is my drop-down nav bar displaying behind webpage content on some pages?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]