How To Use Justify-Content: Space-Between With Position: Fixed?-CodePudding

I am trying to force my footer to the bottom of the page, while still retaining separation between them, but it doesn't seem that Justify-Content, and Position: Fixed work together.

Edit: I have updated my post to include the currently used CSS for this project.

<div >

    <div >
       <a href="https://www.facebook.com/" target="_blank">
         <img width="35" height="35" src="FB2.svg" alt="">
       </a>
    </div>


   <div >
      <a href="https://www.twitter.com/" target = "_blank">
        <img width="35" height="35" src="Twitter.svg" alt="">
      </a>
   </div>
   
</div>

body {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-family: "Helvetica";
}

.Nav {
  display: flex;
  width: 100vw;
  background-color: white;
  padding: 5px;
}

ul {
  display: flex;
  color: white;
  font-size: 25px;
  list-style-type: none;
  margin-left: 20px;
  gap: 50px;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.footer {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  position: fixed;
  gap: 20px;
}

CodePudding user response：

Your footer has position: fixed but it does not have any position set, e.g. top bottom left right. Set those values explicitly:

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

as a shorthand, you can make use of the inset property.

.footer {
  position: fixed;
  inset: auto 0 0 0;
}

This is a similar shorthand to margin, where the 4 values map to top, right, bottom, and left, respectively.

CodePudding user response：

Div elements (and every other element using display: block) default to full parent width. If you set position to fixed, this is no longer the case. Your problem probably is fixed by adding the following to .footer:

width: 100%;

CodePudding user response：

Assign width to footer

.footer {
width: 100%;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  position: fixed;
  gap: 20px;
}