I am very new to this so please be kind 🙂 I am creating a portfolio page with an image gallery, with a header on top and a footer at the bottom. As soon as I entered the code for a gallery, my footer moved – and now I can’t see how I can make it all in one line (like it is on the home page I created! It seems fine!) like to give any advice on how to fix this, I’d be so happy! Also for some reason the footer is just floating in the middle of the page?! Thank you.

#banner{
    text-align: center;
}


#heading{
    font-size: 25px;
    text-align: center;
 } 

 html * {
    font-family: 'Quicksand', sans-serif;
    text-decoration-color: #f13c20;
 }

 .navbar{
    text-align: center;
    font-size: 23px;
 }

 div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }



  .column {
    float: center;
    width: 32%;
    padding: 4px;
 }
 .row::after {

    display: table;
 }

 .footer-navbar{
    text-align: center
    font-size: 20px;
    position: fixed; bottom
    
 }



 #copyfoot{
    text-align: center;
   
 }

 #footernav{
    text-align: center;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maley Like Maybe</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="portfolio.css">
</head>

<body>
    <!-- <---Header---> 
    <div id=banner>
  <img src="images/banner.jpg" width="1250px" height="159px"/></div>
    <div id="heading">
       <h1>Karen Maley</h1>
    </div>

       <nav class="navbar">
        <a href="home.html" class="nav-link">Home</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!-- <a href="#" class="nav-link">Testimonials</a> -->
        <a href="contact.html" class="nav-link">Contact</a>
      </nav>

   <hr />
   <br>
   <br>
   <br>
   <!-- <---Main -->

            <div class="gallery">
                <a target="_blank" href="images/portfolio/adviceteacher.jpg">
                  <img src="images/portfolio/adviceteacher.jpg" alt="Advice from my Art Teacher 2001">
                </a>
                <div class="desc">Advice from Art Teacher 2001</div>
              </div>
              
              <div class="gallery">
                <a target="_blank" href="images/portfolio/epping.jpg">
                  <img src="images/portfolio/epping.jpg" alt="Forest">
                </a>
                <div class="desc">Epping Forest</div>
              </div>
              
              <div class="gallery">
                <a target="_blank" href="images/portfolio/immaterial2022.jpg">
                  <img src="images/portfolio/immaterial2022.jpg" alt="I'mmaterial">
                </a>
                <div class="desc">I'mmaterial</div>
              </div>
              
              <div class="gallery">
                <a target="_blank" href="images/portfolio/lifedrawing.jpg">
                  <img src="images/portfolio/lifedrawing.jpg" alt="Life Drawing">
                </a>
                <div class="desc">Life Drawing - Movement</div>
              </div>
              <br>


            <div class="gallery">
                <div style="padding:35% 0 0 0;position:relative;">
                    <iframe src="https://player.vimeo.com/video/721109316?h=07caa51b7c&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
                    frameborder="0" allow="autoplay; fullscreen; picture-in-picture" 
                    allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" 
                    title="&amp;quot;Peace is Exhausting&amp;quot; by Karen Maley 2022">
                </iframe></div><script src="https://player.vimeo.com/api/player.js"> </script>
            </div>
            <div class="gallery">
            <div style="padding:40% 0 0 0;position:relative;">
                <iframe src="https://player.vimeo.com/video/721142192?h=bfcb05da44&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
                frameborder="0" allow="autoplay; fullscreen; picture-in-picture" 
                allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" 
                title="&amp;quot;Mobile&amp;quot;"></iframe></div>
                <script src="https://player.vimeo.com/api/player.js"></script>
            </div>
        </div>

    </div>
    <br>
<br>
<br>
<br>



        <!-- <---Footer -->
            <footer>
                <div id="footernav">
                  <div class="footer-content">
                    <nav class="footer-navbar">
                      <a href="home.html" class="footer-navlinks">Home</a>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <!-- <a href="#" class="footer-navlinks">Testimonials</a> -->
                      <a href="portfolio.html" class="footer-navlinks">Portfolio</a>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <a href="contact.html" class="footer-navlinks">Contact</a>
                    </nav>
                </div>
    
                <br>
                <br>
    
                <div class="row">
                    <div class="column">
                        <a href="mailto:maleylikemaybe@hotmail.com">
                      <img src="images/socialMedia/email.png" alt="maleylikemaybe@hotmail.com" 
                      width="64px" height="64px"><p>maleylikemaybe@hotmail.com</p>
                    </a>
    
                    </div>
                    <div class="column">
                        <a href="https://www.instagram.com/maleylikemaybe/">
                      <img src="images/socialMedia/insta.jpg" alt="@maleylikemaybe" 
                      width="64px" height="64px" ><p>@maleylikemaybe</p></a>
                    </a>
                    </div>
                    <div class="column">
                        <a href="https://www.youtube.com/channel/UC96yaCbQbhyck2mNY0lMU9Q">
                      <img src="images/socialMedia/youTube.png" alt="Maley Like Maybe" 
                      width="64px" height="64px" ><p>Maley Like Maybe</p></a>
                    </div>
                  </div>
                  
                
                  <div id="copyfoot">
                <p class="footer-cpr">&nbsp;&nbsp;© Karen Maley 2022</p></div>
            </footer>
        
        
    </body>
    </html>

Artisalright is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.