Footer and Form appearing into each other

html css

While developing my website I have came across a problem with my footer and form. My footer seems to be appearing through the form on devices but not on the computer and I'm sure this could be issues with widths of devices? So I kept trying to fix it and still haven't been able to fix it. I'm still learning as I go along and I would be grateful if someone could help me get rolling with my website again. code snippets and images below, kindest regards, Caelan.

body {
    background-color: black ;
}

/* Announcment bar */
.alert {
    padding: 20px;
    background-color: #2a7a85;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

body {
    margin: 0;
}

/* Navigation bar */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(248, 248, 248);
}

ul.topnav li {
    float: left;
}

ul.topnav li a {
    display: block;
    color: black;
    text-align: center;
    font-weight: bold;
    padding: 25px 32px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
    background-color: rgb(55, 81, 165);
}

ul.topnav li a.active {
    background-color: #0cc0d8;
}

ul.topnav li.right {
    float: right;
}

@media screen and (max-width: 600px) {
    ul.topnav li.right,
    ul.topnav li {
        float: none;
    }
}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
    .text {
        font-size: 11px;
    }
}

    /* Homepage button */
.glow-on-hover {
    width: 220px;
    height: 35px;
    border: none;
    outline: none;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 20px;
    background: #111;
    cursor: pointer;
    position: relative;


    z-index: 0;
    border-radius: 10px;
    
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(11, 78, 223);
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

    /* kipplo heading on homepage */

h1 {
    font-size: 10vw;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    color: blue;
    word-wrap: break-word;
    text-align: center;
}

    /* for the heading and the button alignment*/


.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.btn-centering {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    /* product cards*/
  


    h3{
    text-align: center;
    font-size: 30px;
    margin: 0;
    padding-top: 10px;
    }
    a{
    text-decoration: none;
    }
    .gallery{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    }
    .content{
    width: 24%;
    margin: 15px;
    box-sizing: border-box;
    float: left;
    text-align: center;
    border-radius:10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: .4s;
    background-color: whitesmoke;
    }
    .content:hover{
    box-shadow: 0 0 11px rgb(0, 217, 255);
    transform: translate(0px, -8px);
    transition: .6s;
    }
    .productcard-image{
    width: 200px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
    display: block;
    }
    p{
    text-align: center;
    color: #b2bec3;
    padding: 0 8px;
    }
    h6{
    font-size: 26px;
    text-align: center;
    color: #222f3e;
    margin: 0;
    }
    .product-card{
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    }
    .productcard-list{
    padding: 5px;
    }
    .fa{
    color: #ff9f43;
    font-size: 26px;
    transition: .4s;
    }
    .fa:hover{
    transform: scale(1.3);
    transition: .6s;
    }
    .productcardbutton{
    text-align: center;
    font-size: 24px;
    color: #fff;
    width: 100%;
    padding: 15px;
    border:0px;
    outline: none;
    cursor: pointer;
    margin-top: 5px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    .buy-1{
    background-color: #2183a2;
    }
    .buy-2{
    background-color: #3b3e6e;
    }
    .buy-3{
    background-color: #0b0b0b;
    }
    @media(max-width: 1000px){
    .content{
    width: 46%;
    }
    }
    @media(max-width: 750px){
    .content{
    width: 100%;
    }
    }

      /* Footer */
    .footer__container {
        background-color: #141414;
        padding: 5rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      
      #footer__logo {
        color: #fff;
        display: flex;
        align-items: center;
        cursor: pointer;
        text-decoration: none;
        font-size: 2rem;
      }
      
      .footer__links {
        width: 100%;
        max-width: 1000px;
        display: flex;
        justify-content: center;
      }
      
      .footer__link--wrapper {
        display: flex;
      }
      
      .footer__link--items {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 16px;
        text-align: left;
        width: 160px;
        box-sizing: border-box;
      }
      
      .footer__link--items h2 {
        margin-bottom: 16px;
      }
      
      .footer__link--items > h2 {
        color: #fff;
      }
      
      .footer__link--items a {
        color: #fff;
        text-decoration: none;
        margin-bottom: 0.5rem;
      }
      
      .footer__link--items a:hover {
        color: #e9e9e9;
        transition: 0.3s ease-out;
      }
      
      /* Social Icons */
      .social__icon--link {
        color: #fff;
        font-size: 24px;
      }
      
      .social__media {
        max-width: 1000px;
        width: 100%;
      }
      
      .social__media--wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1000px;
        margin: 40px auto 0 auto;
      }
     
      .website__rights {
        color: #fff;
        
      }
      
      @media screen and (max-width: 820px) {
        .footer__links {
          padding-top: 2rem;
        }
      
        #footer__logo {
          margin-bottom: 2rem;
        }
      
        .website__rights {
            padding: 2rem;
        }
      
        .footer__link--wrapper {
          flex-direction: column;
        }
      
        .social__media--wrap {
          flex-direction: column;
        }
      }
      
      @media screen and (max-width: 480px) {
        .footer__link--items {
          margin: 0;
          padding: 10px;
          width: 100%;
        }
      }
      /* Text above the form*/
   
    
    
    
    
    
      /* Feedback form*/

      .form1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;
        margin: 15vh auto;
        margin-bottom: -60vh;
        border-radius: 15px;
        border: none;
        box-shadow: 0 0 15px rgb(24, 143, 190);
    }
    
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
    }
    
    input {
        width: 100%;
        margin: 5px 0;
        height: 35px;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
    }
    
    textarea {
        width: 100%;
        margin: 5px 0;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
    }
    input[type=submit]{
        margin: 10px auto;
        width: 120px;
        background: rgb(24, 143, 190);
        color: white;
        cursor: pointer;
    }
    input[type=submit]:hover{
    background: rgb(19, 41, 238);
    }
    @media screen and (max-width:600px) {
        .form1{
            width: 90%;
        }
    }
    
   h2 {

color: #00ffd5;
font-size: 30px;

   }

p4 {
color: #00ffd5;
font-size: 20px;

}
   
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="img/icon.png" />
        <link rel="stylesheet" href="styles.css" />
        <title>Contact Us</title>
    </head>
    <body>

        <!-- Alert bar -->
        <div class="container">
            <div class="alert">
                <span
                    class="closebtn"
                    onclick="this.parentElement.style.display='none';"
                    >&times;</span>
                <center>
                    <strong>DEALS NOW ON!</strong> Upto 30% discounts this
                    christmas
                </center>
            </div>
               <!-- Navigation bar -->
            <ul class="topnav">
                <li><img src="img/logo.png" /></li>
                <li><a href="index.html">Home</a></li>
                <li><a href="products.html">Products</a></li>
                <li><a class="active" href="contactus.html">Contact Us</a></li>
                <li class="right"><a href="#about">About Us</a></li>
            </ul>
 
            <!-- Form -->

            <div class="form1">
             <h2>Contact Us!</h2>
               <p4>Typical Replies Within 24hrs!</p4>
                <br>
                <form action="">
                    <input type="email" name="email" id="email" placeholder="Enter your email">
                    <input type="text" name="name" id="name" placeholder=" Enter your name">
                    <textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here"></textarea>
                    <input type="submit" value="Send">
                </form>
            </div>      
</div>
                  <!-- Footer -->

            <div class="footer__container">
                <div class="footer__links">
                  <div class="footer__link--wrapper">
                    <div class="footer__link--items">
                      <a href="/sign__up">About Us</a> 
                    </div>
                    <div class="footer__link--items">
                      <a href="/">Contact Us</a> 
                    </div>
                  </div>
                  <div class="footer__link--wrapper">
                    
                    <div class="footer__link--items">
                      <a href="/">Youtube</a> 
                    </div>
                    <div class="footer__link--items">
                      <a href="/">TikTok</a> 
                    </div>
                  </div>
                </div>
                <section class="social__media">
                  <div class="social__media--wrap">
                    <div class="footer__logo">
                        
                        
                        <a href="index.html">
                        <img src="img/logo2.png"  id="footer__logo" ></a>
    
    
                        
                    </div>
                    <p class="website__rights">&copy; KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved</p>
                    <div class="social__icons">
                      
                    </div>
                  </div>
                </section>
              </div>

    </body>
</html>

enter image description here enter image description here


I've adjusted the css to remove the height and margin on the containers:

      body {
        background-color: black;
      }

      /* Announcment bar */
      .alert {
        padding: 20px;
        background-color: #2a7a85;
        color: white;
      }

      .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
      }

      .closebtn:hover {
        color: black;
      }

      body {
        margin: 0;
      }

      /* Navigation bar */
      ul.topnav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgb(248, 248, 248);
      }

      ul.topnav li {
        float: left;
      }

      ul.topnav li a {
        display: block;
        color: black;
        text-align: center;
        font-weight: bold;
        padding: 25px 32px;
        text-decoration: none;
      }

      ul.topnav li a:hover:not(.active) {
        background-color: rgb(55, 81, 165);
      }

      ul.topnav li a.active {
        background-color: #0cc0d8;
      }

      ul.topnav li.right {
        float: right;
      }

      @media screen and (max-width: 600px) {
        ul.topnav li.right,
        ul.topnav li {
          float: none;
        }
      }

      /* On smaller screens, decrease text size */

      @media only screen and (max-width: 300px) {
        .text {
          font-size: 11px;
        }
      }

      /* Homepage button */
      .glow-on-hover {
        width: 220px;
        height: 35px;
        border: none;
        outline: none;
        color: rgb(0, 0, 0);
        font-weight: bold;
        font-size: 20px;
        background: #111;
        cursor: pointer;
        position: relative;

        z-index: 0;
        border-radius: 10px;
      }

      .glow-on-hover:before {
        content: "";
        background: linear-gradient(
          45deg,
          #ff0000,
          #ff7300,
          #fffb00,
          #48ff00,
          #00ffd5,
          #002bff,
          #7a00ff,
          #ff00c8,
          #ff0000
        );
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        border-radius: 10px;
      }

      .glow-on-hover:active {
        color: #000;
      }

      .glow-on-hover:active:after {
        background: transparent;
      }

      .glow-on-hover:hover:before {
        opacity: 1;
      }

      .glow-on-hover:after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgb(11, 78, 223);
        left: 0;
        top: 0;
        border-radius: 10px;
      }

      @keyframes glowing {
        0% {
          background-position: 0 0;
        }
        50% {
          background-position: 400% 0;
        }
        100% {
          background-position: 0 0;
        }
      }

      /* kipplo heading on homepage */

      h1 {
        font-size: 10vw;
        margin: 0;
        padding: 0;
        font-family: "Courier New", Courier, monospace;
        color: blue;
        word-wrap: break-word;
        text-align: center;
      }

      /* for the heading and the button alignment*/

      .container {
        display: flex;
        flex-direction: column;
      }

      .btn-centering {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      /* product cards*/

      h3 {
        text-align: center;
        font-size: 30px;
        margin: 0;
        padding-top: 10px;
      }
      a {
        text-decoration: none;
      }
      .gallery {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: 50px 0;
      }
      .content {
        width: 24%;
        margin: 15px;
        box-sizing: border-box;
        float: left;
        text-align: center;
        border-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        padding-top: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        transition: 0.4s;
        background-color: whitesmoke;
      }
      .content:hover {
        box-shadow: 0 0 11px rgb(0, 217, 255);
        transform: translate(0px, -8px);
        transition: 0.6s;
      }
      .productcard-image {
        width: 200px;
        height: 200px;
        text-align: center;
        margin: 0 auto;
        display: block;
      }
      p {
        text-align: center;
        color: #b2bec3;
        padding: 0 8px;
      }
      h6 {
        font-size: 26px;
        text-align: center;
        color: #222f3e;
        margin: 0;
      }
      .product-card {
        list-style-type: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }
      .productcard-list {
        padding: 5px;
      }
      .fa {
        color: #ff9f43;
        font-size: 26px;
        transition: 0.4s;
      }
      .fa:hover {
        transform: scale(1.3);
        transition: 0.6s;
      }
      .productcardbutton {
        text-align: center;
        font-size: 24px;
        color: #fff;
        width: 100%;
        padding: 15px;
        border: 0px;
        outline: none;
        cursor: pointer;
        margin-top: 5px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }
      .buy-1 {
        background-color: #2183a2;
      }
      .buy-2 {
        background-color: #3b3e6e;
      }
      .buy-3 {
        background-color: #0b0b0b;
      }
      @media (max-width: 1000px) {
        .content {
          width: 46%;
        }
      }
      @media (max-width: 750px) {
        .content {
          width: 100%;
        }
      }

      /* Footer */
      .footer__container {
        background-color: #141414;
        padding: 5rem 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #footer__logo {
        color: #fff;
        display: flex;
        align-items: center;
        cursor: pointer;
        text-decoration: none;
        font-size: 2rem;
      }

      .footer__links {
        width: 100%;
        max-width: 1000px;
        display: flex;
        justify-content: center;
      }

      .footer__link--wrapper {
        display: flex;
      }

      .footer__link--items {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 16px;
        text-align: left;
        width: 160px;
        box-sizing: border-box;
      }

      .footer__link--items h2 {
        margin-bottom: 16px;
      }

      .footer__link--items > h2 {
        color: #fff;
      }

      .footer__link--items a {
        color: #fff;
        text-decoration: none;
        margin-bottom: 0.5rem;
      }

      .footer__link--items a:hover {
        color: #e9e9e9;
        transition: 0.3s ease-out;
      }

      /* Social Icons */
      .social__icon--link {
        color: #fff;
        font-size: 24px;
      }

      .social__media {
        max-width: 1000px;
        width: 100%;
      }

      .social__media--wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1000px;
        margin: 40px auto 0 auto;
      }

      .website__rights {
        color: #fff;
      }

      @media screen and (max-width: 820px) {
        .footer__links {
          padding-top: 2rem;
        }

        #footer__logo {
          margin-bottom: 2rem;
        }

        .website__rights {
          padding: 2rem;
        }

        .footer__link--wrapper {
          flex-direction: column;
        }

        .social__media--wrap {
          flex-direction: column;
        }
      }

      @media screen and (max-width: 480px) {
        .footer__link--items {
          margin: 0;
          padding: 10px;
          width: 100%;
        }
      }
      /* Text above the form*/

      /* Feedback form*/

      .form1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;
        margin: 15vh auto;
        border-radius: 15px;
        border: none;
        box-shadow: 0 0 15px rgb(24, 143, 190);
      }

      form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
      }

      input {
        width: 100%;
        margin: 5px 0;
        height: 35px;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
      }

      textarea {
        width: 100%;
        margin: 5px 0;
        font-size: 17px;
        text-align: center;
        outline: none;
        border-radius: 15px;
        border: none;
        background: rgb(235, 228, 228);
      }
      input[type="submit"] {
        margin: 10px auto;
        width: 120px;
        background: rgb(24, 143, 190);
        color: white;
        cursor: pointer;
      }
      input[type="submit"]:hover {
        background: rgb(19, 41, 238);
      }
      @media screen and (max-width: 600px) {
        .form1 {
          width: 90%;
        }
      }

      h2 {
        color: #00ffd5;
        font-size: 30px;
      }

      p4 {
        color: #00ffd5;
        font-size: 20px;
      }
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="img/icon.png" />
    <link rel="stylesheet" href="styles.css" />
    <title>Contact Us</title>
  </head>
  <body>
    <!-- Alert bar -->
    <div class="container">
      <div class="alert">
        <span
          class="closebtn"
          onclick="this.parentElement.style.display='none';"
          >&times;</span
        >
        <center>
          <strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
        </center>
      </div>
      <!-- Navigation bar -->
      <ul class="topnav">
        <li><img src="img/logo.png" /></li>
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a class="active" href="contactus.html">Contact Us</a></li>
        <li class="right"><a href="#about">About Us</a></li>
      </ul>

      <!-- Form -->

      <div class="form1">
        <h2>Contact Us!</h2>
        <p4>Typical Replies Within 24hrs!</p4>
        <br />
        <form action="">
          <input
            type="email"
            name="email"
            id="email"
            placeholder="Enter your email"
          />
          <input
            type="text"
            name="name"
            id="name"
            placeholder=" Enter your name"
          />
          <textarea
            name="message"
            id="message"
            cols="30"
            rows="10"
            placeholder="Enter your message here"
          ></textarea>
          <input type="submit" value="Send" />
        </form>
      </div>
    </div>
    <!-- Footer -->

    <div class="footer__container">
      <div class="footer__links">
        <div class="footer__link--wrapper">
          <div class="footer__link--items">
            <a href="/sign__up">About Us</a>
          </div>
          <div class="footer__link--items">
            <a href="/">Contact Us</a>
          </div>
        </div>
        <div class="footer__link--wrapper">
          <div class="footer__link--items">
            <a href="/">Youtube</a>
          </div>
          <div class="footer__link--items">
            <a href="/">TikTok</a>
          </div>
        </div>
      </div>
      <section class="social__media">
        <div class="social__media--wrap">
          <div class="footer__logo">
            <a href="index.html">
              <img src="img/logo2.png" id="footer__logo"
            /></a>
          </div>
          <p class="website__rights">
            &copy; KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
          </p>
          <div class="social__icons"></div>
        </div>
      </section>
    </div>
  </body>
</html>

Related

android datastore-preferences: Property delegate must have a 'getValue(Context, KProperty<*>)' method
Make setxkbmap preferences being set at startup
Get root access for copying files to /usr/share/...?
How do I set up a PPTP VPN on my own Ubuntu Server?
How to remap a key combination to a single key?
How do you configure desktop for a static IP address?
After update, get "error: file not found." followed by "grub rescue> _"
I cant get samba to set proper permissions on created directories
Connecting to Cisco VPN from Ubuntu 18.04 without a Group Password
How to list all the packages which are installed from PPAs?
How do I upgrade from x86 to x64 without losing settings?
Installing Ubuntu alongside windows on Lenovo Yoga 720