0

enter image description here

There is a pixel or two of white space between the left, right, and bottom of the screen and my footer (see the red scribbles on the image above. How do I get the footer to take up all of this space?

Some things I've tried:

  • I created a margin-left: -10; margin-right:-10; - this worked but it messes with scrolling because the user can scroll sideways now, which I do not want.
    • I created a bottom <div> which had height: 1; this worked for the bottom but there has to be a better way than sticking a <div> here and it doesn't solve for the sideways white space.

Margins are not applied to the parent element of the footer. 

footer {
  background-color: #445077;
  display: flex;
  align-items: center;
  padding: 20;
  color: white;
  font-size: 14;
}

.col {
  display: flex;
  flex: 1;
}
<footer>
  <div class="col">
    <a href="" class="privacy_policy">
      <div>Privacy policy</div>
    </a>
  </div>
  <div class="col" style="justify-content: center;">
    <div class="footer_submit">Subscribe</div>
  </div>
  <div class="col" style="justify-content: flex-end;">
    <a href="" style="text-decoration: none; color:white"><i class="fa fa-linkedin-square" style="font-size:24px;"></i
        ></a>
  </div>
</footer>
Aleksandr Belugin
  • 2,149
  • 1
  • 13
  • 19
mpc75
  • 937
  • 9
  • 22

2 Answers2

1

body has default margins 8px (in Chrome at least), set magrin: 0 to it.

body {
  margin: 0;
}

footer {
  background-color: #445077;
  display: flex;
  align-items: center;
  padding: 20;
  color: white;
  font-size: 14;
}

.col {
  display: flex;
  flex: 1;
}
<footer>
  <div class="col">
    <a href="" class="privacy_policy">
      <div>Privacy policy</div>
    </a>
  </div>
  <div class="col" style="justify-content: center;">
    <div class="footer_submit">Subscribe</div>
  </div>
  <div class="col" style="justify-content: flex-end;">
    <a href="" style="text-decoration: none; color:white"><i class="fa fa-linkedin-square" style="font-size:24px;"></i
        ></a>
  </div>
</footer>
Aleksandr Belugin
  • 2,149
  • 1
  • 13
  • 19
1

Have you tried:

html,
body {
  margin: 0;
  padding: 0;
}

You should upload the rest of your code, maybe something else is causing the problem.

VorganHaze
  • 1,887
  • 1
  • 12
  • 35
  • 1
    This worked, thanks! Turns out I only needed to zero out the margin, thanks for the help :) – mpc75 Feb 16 '20 at 19:37