I am trying to place the Footer on the Bottom Center of my page but nothing is working, I don't know if it is a Code that is blocking it to go down, but I am sure it is!

I am new to HTML and CSS! Please advise!

Below is my full HTML and CSS code!

Thank you so much for your help!

PS: I don't want to change my current code as it is working Perfectly Fine, I just want to place the Footer on the Bottom Center of my page!

(Exactly as the NavBar)

Please try it on your Editor for better understanding!

body {
  background-image: url(../images/body_bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.topnav {
  background-color: rgb(54, 54, 54);
  overflow: hidden;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 3px solid rgb(250, 186, 113);
  border-bottom: 3px solid rgb(250, 186, 113);
  filter: saturate(2);
}

.topnav a {
  float: left;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(250, 186, 113);
  text-align: center;
  padding: 11px 15px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

.topnav a:hover {
  background-color: rgba(255, 255, 255, 0.7);
  color: rgb(0, 0, 0);
}

.topnav a.active {
  background-color: rgb(250, 186, 113);
  color: white;
}

.social {
  float: right;
}

#logo {
  position: absolute;
  left: 445px;
  top: -11px;
  text-align: center;
  background-color: transparent;
  color: rgb(250, 186, 113);
}

img {
  top: 7px;
  width: 30px;
  height: 30px;
  position: relative;
  left: 181px;
  text-align: center;
}

.footer {
  display: block;
  overflow: hidden;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(250, 186, 113);
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  background-color: rgb(54, 54, 54);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 3px solid rgb(250, 186, 113);
  border-bottom: 3px solid rgb(250, 186, 113);
  filter: saturate(2);
}

<div >
  <a  href="#home"><i ></i> Home</a>
  <a href="portfolio.html"><i ></i> Portfolio</a>
  <a href="contact.html"><i ></i> Contact</a>
  <a href="about.html"><i ></i> About</a>
  <a href="index.html" id="logo"><img src="images/logo2.png" alt="logo"></a>
  <div >
    <a  href="https://facebook.com" target="_blank" title="Facebook"><i ></i>&nbsp Facebook</a>
    <a  href="https://instagram.com" target="_blank" title="Instagram"><i ></i>&nbsp Instagram</a>
    <a  href="https://twitter.com" target="_blank" title="Twitter"><i ></i>&nbsp Twitter</a>
  </div>
</div>

<div >
  <p id="footerdesc">Made with love by BS INDUSTRIES! Check out my social media: </p>
</div>

CodePudding user response：

Adding the following code to .footer will put the footer at the bottom of the screen. I would explain how the code works but I think you'll be better off learning about positioning in a well-made tutorial.

(The code will put the footer at the bottom of the screen; if you scroll, the footer will stay at the bottom of the screen. If you want your footer to be at the bottom of the page, possibly hidden depending on scroll position, please clarify so in your question.)

position: fixed;
bottom: 8px;
left: 8px;
right: 8px;

CodePudding user response：

Good luck, Try to add the following properties in footer selector.

position: fixed;
width: 100%;
bottom: 0;

.footer { 
  position: fixed;
  width: 100%;
  bottom: 0;
  display: block;
  overflow: hidden;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: rgb(250, 186, 113);
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  background-color: rgb(54, 54, 54);
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 3px solid rgb(250, 186, 113);
  border-bottom: 3px solid rgb(250, 186, 113);
  filter: saturate(2);
}