背景图像问题

Question

我对开发非常新鲜，并且一直试图合作一个小的投资组合页面但是我的身体部分的背景图像有问题。我一直在努力寻找可能的解决方案，在网上遇到了许多答案，所有这些都没有做任何事情。

My CodePen表明，背景图像正在将页脚推到页面顶部，并在底部有这个间隙。页脚与图像不在div中，因此我不确定为什么它希望到页面顶部。我也尝试了各种设置高度和最小高度的组合到100％，但图像没有达到其父div的高度。

提前谢谢，如果这是简单的我可以忽略:)

html {
  min-height: 100%;
  margin:0px;
  height: 100%;
}


body {
  margin: 0;
  background-color: #777;
  padding:0;
  min-height:100%;
}

.bg-img {
  background: url("https://static.pexels.com/photos/574073/pexels-photo-574073.jpeg");
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  opacity: 0.3;
  height: 100%;
  width:100%;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  display: grid;
}
.nav-name {
  font-family: garamond;
  color: white;
  float: left;
  text-align: left;
  padding: 25px 0px;
  margin: 0;
}

header {
  background-color: #6fc676;
  border-bottom: 2px solid white;
  margin: 0;
}

header::after {
  content: "";
  display: table;
  clear: both;
}

#stuff {
  margin: 0px;
}

nav {
  float: right;
  margin: 0px;
  padding: 25px 0px;
}

nav ul {
  padding: 0;
  list-style: none;
  color: white;
  font-family: garamond;
  margin: 0;
}

nav li {
  display: inline-block;
  margin-left: 50px;
  margin-bottom: 0px;
}

nav a {
  color: white;
  text-decoration: none;
}

.nav-btn {
  background-color: #6fc676;
  padding:5px 15px;
  border: 0px;
  border-radius: 3px;
}

.nav-btn:hover {
  background-color:#afeab4;
}

.about-wrapper {
  color: black;
  font-size: 16px;
  display: grid;
  width: 80%;
  margin: 0px auto 0px auto;
  padding: 35px 0px 35px 5px;
  grid-template-columns: 1fr 1fr;
}

.about-text {
  align-self: center;
  font-family: georgia, serif;
}

.skills ul {
  margin: 1.5em auto;
  text-align: center;
}

.skills li {
  list-style: none;
  display: inline-block;
  padding: 0px 10px;
  font-stlye: italic;
}

.about-pic {
  justify-self: center;
  grid-row: span 2;
}
.about-img {
  width: 150px;
  border-radius: 50%;
  border:2px solid white;
}

.portfolio-title {
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  color: black;
  font-family: garamond;
}

.portfolio-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  width: 80%;
  margin: 0px auto;
  padding: 15px 0px 15px 5px;
}

.portfolio-img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.card {
  /*width: 50%;*/
  justify-self: center;
  background-color: #6fc676;
  color: black;
  font-family: georgia, serif;
}

.card-name {
  text-align:center;
}
#card1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card4 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

.contact-title {
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  color: black;
  font-family: garamond;
  grid-column: 1/4;
}

fieldset {
  border: 0px;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  padding-bottom: 5px;
}

.contact-form {
  margin: 3px;
  padding-left: 5px;
}

#contact input,
textarea {
  background: transparent;
  margin:3px;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
  font-family: georgia, serif;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: black;
  font-family: georgia, serif;
  font-size: 14px;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: black;
  font-family: georgia, serif;
  font-size: 14px;
}

.submit {
  text-align: center;
}

#submit-btn {
  text-align: center;
  margin: 5px auto;
  padding: 10px;
  display: inline-block;
  border-radius: 8px;
}

#submit-btn:hover {
  background-color: #888;
  opactity: 0.9;
}

.contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 15px 50px;
  margin: 0px 0px;
}

.link1 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link2 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link3 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link4 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.fa-facebook {
  background: #6fc676;
  color: white;
  padding: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.fa-facebook:hover{
  background:#a2e8ae;
}

.fa-linkedin {
  background: #6fc676;
  color: white;
  padding: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.fa-linkedin:hover{
  background:#a2e8ae;
}

.fa-github {
  border: 2px solid white;
  border-radius: 50%;
  padding: 20px;
  color: white;
  background-color: #6fc676;
}

.fa-github:hover{
  background:#a2e8ae;
}

.fa-free-code-camp {
  color: white;
  border: 2px solid white;
  background-color: #6fc676;
  border-radius: 50%;
  padding: 20px;
}

.fa-free-code-camp:hover{
  background:#a2e8ae;
}

footer {
  background-color: #6fc676;
  border-top: 2px solid white;
  text-align: center;
  color: white;
  padding: 25px 0px 10px 0px;
  margin: 0px;
}

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Mojo Design</title>
</head>

<body>

  <header>
    <div class="wrapper">
      <div id="stuff">
        <h3 class="nav-name">Michael Blydenburgh</h3>
        <nav>
          <ul>
            <li><button class="nav-btn"><a href="#about">About</a></button></li>
            <li><button class="nav-btn"><a href="#portfolio">Portfolio</a></button></li>
            <li><button class="nav-btn"><a href="#contact">Contact</a></button></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>


<div class ="bg-img">
    <div class="about-wrapper" id="about">

      <div class="about-text">
        I am a classically trained chemical engineer hoping to take my career in a new direction. Current experience is in front-end development, with basic server side knowledge and a desire to continue professional growth. Please feel free to contact me to
        discuss what assistance you are looking for!
      </div>
      <div class="about-pic">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1780363/mike.jpg" alt="Self Photograph" class="about-img">
      </div>
      <div class="skills">
        <hr>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>Javascript</li>
          <li>Python</li>
          <li>PHP</li>
        </ul>
      </div>
    </div>

    <h3 class="portfolio-title">Portfolio</h3>
    <div class="portfolio-wrapper" id="portfolio">
      <div class="card" id="card1">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1780363/tribute.JPG" alt="Page Preview" class="portfolio-img">
        <div class="card-name">
          <h5>Tribute to Umphreys McGee</h5>
        </div>
      </div>
      <div class="card" id="card2">
        <div class="card-name">
          <h5>Page2</h5>
        </div>
      </div>
      <div class="card" id="card3">
        <div class="card-name">
          <h5>Page3</h5>
        </div>
      </div>
      <div class="card" id="card4">
        <div class="card-name">
          <h5>Page4</h5>
        </div>
      </div>
    </div>

    <h3 class="contact-title">Contact & Social Media</h3>
    <div class="contact-wrapper" id="contact">

      <div class="contact-form">
        <form action="http:///www.example.com/contact.php">
          <fieldset>
            <label>
            <input type="text" name="name" size="40" placeholder="Enter Name" maxlength="100" id="name-form">
          </label>
            <br>
            <label>
            <input type="text" name="email" size="40" placeholder="Enter Email" maxlength="100" id="email-form">
          </label>
            <br>
            <label>
            <textarea name="message" cols="60" rows="5" class="message-form">Leave a message!</textarea>
          </label>
            <div class="submit">
              <input type="submit" value="Submit Message" id="submit-btn">
            </div>
          </fieldset>
        </form>
      </div>
      <div class="contact-links">
        <div class="link1"><a href="https://www.facebook.com/mblydenburgh" class="fa fa-facebook" target="blank"></a></div>
        <div class="link2"><a href="https://www.linkedin.com/in/michael-blydenburgh-99a68872/" class="fa fa-linkedin" target="blank"></a></div>
        <div class="link3"><a href="https://github.com/mikebly" class="fa fa-github" target="blank"></a></div>
        <div class="link4"><a href="https://www.freecodecamp.org/mikebly" class="fa fa-free-code-camp" target="blank"></a></div>
      </div>
    </div>


</div>


  <footer>
  Design and Coded by Michael Blydenburgh (2018)
  </footer>

</body>

Answer 1

你的问题出在bg-img类'position: absolute;值。

具有position: absolute;的元素相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

所以，我把它改成了relative，它相对于元素的当前位置而定位。

检查此链接还有css_positioning

html {
  min-height: 100%;
  margin:0px;
  height: 100%;
}


body {
  margin: 0;
  background-color: #777;
  padding:0;
  min-height:100%;
}

.bg-img {
  background: url("https://static.pexels.com/photos/574073/pexels-photo-574073.jpeg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  opacity: 0.3;
  height: 100%;
  width:100%;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  display: grid;
}
.nav-name {
  font-family: garamond;
  color: white;
  float: left;
  text-align: left;
  padding: 25px 0px;
  margin: 0;
}

header {
  background-color: #6fc676;
  border-bottom: 2px solid white;
  margin: 0;
}

header::after {
  content: "";
  display: table;
  clear: both;
}

#stuff {
  margin: 0px;
}

nav {
  float: right;
  margin: 0px;
  padding: 25px 0px;
}

nav ul {
  padding: 0;
  list-style: none;
  color: white;
  font-family: garamond;
  margin: 0;
}

nav li {
  display: inline-block;
  margin-left: 50px;
  margin-bottom: 0px;
}

nav a {
  color: white;
  text-decoration: none;
}

.nav-btn {
  background-color: #6fc676;
  padding:5px 15px;
  border: 0px;
  border-radius: 3px;
}

.nav-btn:hover {
  background-color:#afeab4;
}

.about-wrapper {
  color: black;
  font-size: 16px;
  display: grid;
  width: 80%;
  margin: 0px auto 0px auto;
  padding: 35px 0px 35px 5px;
  grid-template-columns: 1fr 1fr;
}

.about-text {
  align-self: center;
  font-family: georgia, serif;
}

.skills ul {
  margin: 1.5em auto;
  text-align: center;
}

.skills li {
  list-style: none;
  display: inline-block;
  padding: 0px 10px;
  font-stlye: italic;
}

.about-pic {
  justify-self: center;
  grid-row: span 2;
}
.about-img {
  width: 150px;
  border-radius: 50%;
  border:2px solid white;
}

.portfolio-title {
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  color: black;
  font-family: garamond;
}

.portfolio-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  width: 80%;
  margin: 0px auto;
  padding: 15px 0px 15px 5px;
}

.portfolio-img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.card {
  /*width: 50%;*/
  justify-self: center;
  background-color: #6fc676;
  color: black;
  font-family: georgia, serif;
}

.card-name {
  text-align:center;
}
#card1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card4 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

.contact-title {
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  color: black;
  font-family: garamond;
  grid-column: 1/4;
}

fieldset {
  border: 0px;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  padding-bottom: 5px;
}

.contact-form {
  margin: 3px;
  padding-left: 5px;
}

#contact input,
textarea {
  background: transparent;
  margin:3px;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
  font-family: georgia, serif;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: black;
  font-family: georgia, serif;
  font-size: 14px;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: black;
  font-family: georgia, serif;
  font-size: 14px;
}

.submit {
  text-align: center;
}

#submit-btn {
  text-align: center;
  margin: 5px auto;
  padding: 10px;
  display: inline-block;
  border-radius: 8px;
}

#submit-btn:hover {
  background-color: #888;
  opactity: 0.9;
}

.contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 15px 50px;
  margin: 0px 0px;
}

.link1 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link2 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link3 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link4 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.fa-facebook {
  background: #6fc676;
  color: white;
  padding: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.fa-facebook:hover{
  background:#a2e8ae;
}

.fa-linkedin {
  background: #6fc676;
  color: white;
  padding: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.fa-linkedin:hover{
  background:#a2e8ae;
}

.fa-github {
  border: 2px solid white;
  border-radius: 50%;
  padding: 20px;
  color: white;
  background-color: #6fc676;
}

.fa-github:hover{
  background:#a2e8ae;
}

.fa-free-code-camp {
  color: white;
  border: 2px solid white;
  background-color: #6fc676;
  border-radius: 50%;
  padding: 20px;
}

.fa-free-code-camp:hover{
  background:#a2e8ae;
}

footer {
  background-color: #6fc676;
  border-top: 2px solid white;
  text-align: center;
  color: white;
  padding: 25px 0px 10px 0px;
  margin: 0px;
}

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Mojo Design</title>
</head>

<body>

  <header>
    <div class="wrapper">
      <div id="stuff">
        <h3 class="nav-name">Michael Blydenburgh</h3>
        <nav>
          <ul>
            <li><button class="nav-btn"><a href="#about">About</a></button></li>
            <li><button class="nav-btn"><a href="#portfolio">Portfolio</a></button></li>
            <li><button class="nav-btn"><a href="#contact">Contact</a></button></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

<section>
<div class ="bg-img">
    <div class="about-wrapper" id="about">

      <div class="about-text">
        I am a classically trained chemical engineer hoping to take my career in a new direction. Current experience is in front-end development, with basic server side knowledge and a desire to continue professional growth. Please feel free to contact me to
        discuss what assistance you are looking for!
      </div>
      <div class="about-pic">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1780363/mike.jpg" alt="Self Photograph" class="about-img">
      </div>
      <div class="skills">
        <hr>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>Javascript</li>
          <li>Python</li>
          <li>PHP</li>
        </ul>
      </div>
    </div>

    <h3 class="portfolio-title">Portfolio</h3>
    <div class="portfolio-wrapper" id="portfolio">
      <div class="card" id="card1">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1780363/tribute.JPG" alt="Page Preview" class="portfolio-img">
        <div class="card-name">
          <h5>Tribute to Umphreys McGee</h5>
        </div>
      </div>
      <div class="card" id="card2">
        <div class="card-name">
          <h5>Page2</h5>
        </div>
      </div>
      <div class="card" id="card3">
        <div class="card-name">
          <h5>Page3</h5>
        </div>
      </div>
      <div class="card" id="card4">
        <div class="card-name">
          <h5>Page4</h5>
        </div>
      </div>
    </div>

    <h3 class="contact-title">Contact & Social Media</h3>
    <div class="contact-wrapper" id="contact">

      <div class="contact-form">
        <form action="http:///www.example.com/contact.php">
          <fieldset>
            <label>
            <input type="text" name="name" size="40" placeholder="Enter Name" maxlength="100" id="name-form">
          </label>
            <br>
            <label>
            <input type="text" name="email" size="40" placeholder="Enter Email" maxlength="100" id="email-form">
          </label>
            <br>
            <label>
            <textarea name="message" cols="60" rows="5" class="message-form">Leave a message!</textarea>
          </label>
            <div class="submit">
              <input type="submit" value="Submit Message" id="submit-btn">
            </div>
          </fieldset>
        </form>
      </div>
      <div class="contact-links">
        <div class="link1"><a href="https://www.facebook.com/mblydenburgh" class="fa fa-facebook" target="blank"></a></div>
        <div class="link2"><a href="https://www.linkedin.com/in/michael-blydenburgh-99a68872/" class="fa fa-linkedin" target="blank"></a></div>
        <div class="link3"><a href="https://github.com/mikebly" class="fa fa-github" target="blank"></a></div>
        <div class="link4"><a href="https://www.freecodecamp.org/mikebly" class="fa fa-free-code-camp" target="blank"></a></div>
      </div>
    </div>


</div>
</section>

  <footer>
  Design and Coded by Michael Blydenburgh (2018)
  </footer>

</body>

Answer 2

这会奏效。我用padding-top: 146px的风格插入了.bg-img。我使用了值146px，因为div的高度是146px。

html {
  min-height: 100%;
  margin:0px;
  height: 100%;
}


body {
  margin: 0;
  background-color: #777;
  padding:0;
  min-height:100%;
}

.bg-img {
  background: url("https://static.pexels.com/photos/574073/pexels-photo-574073.jpeg");
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  opacity: 0.3;
  height: 100%;
  width:100%;
  padding-top: 146px;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  display: grid;
}
.nav-name {
  font-family: garamond;
  color: white;
  float: left;
  text-align: left;
  padding: 25px 0px;
  margin: 0;
}

header {
  background-color: #6fc676;
  border-bottom: 2px solid white;
  margin: 0;
}

header::after {
  content: "";
  display: table;
  clear: both;
}

#stuff {
  margin: 0px;
}

nav {
  float: right;
  margin: 0px;
  padding: 25px 0px;
}

nav ul {
  padding: 0;
  list-style: none;
  color: white;
  font-family: garamond;
  margin: 0;
}

nav li {
  display: inline-block;
  margin-left: 50px;
  margin-bottom: 0px;
}

nav a {
  color: white;
  text-decoration: none;
}

.nav-btn {
  background-color: #6fc676;
  padding:5px 15px;
  border: 0px;
  border-radius: 3px;
}

.nav-btn:hover {
  background-color:#afeab4;
}

.about-wrapper {
  color: black;
  font-size: 16px;
  display: grid;
  width: 80%;
  margin: 0px auto 0px auto;
  padding: 35px 0px 35px 5px;
  grid-template-columns: 1fr 1fr;
}

.about-text {
  align-self: center;
  font-family: georgia, serif;
}

.skills ul {
  margin: 1.5em auto;
  text-align: center;
}

.skills li {
  list-style: none;
  display: inline-block;
  padding: 0px 10px;
  font-stlye: italic;
}

.about-pic {
  justify-self: center;
  grid-row: span 2;
}
.about-img {
  width: 150px;
  border-radius: 50%;
  border:2px solid white;
}

.portfolio-title {
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  color: black;
  font-family: garamond;
}

.portfolio-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  width: 80%;
  margin: 0px auto;
  padding: 15px 0px 15px 5px;
}

.portfolio-img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.card {
  /*width: 50%;*/
  justify-self: center;
  background-color: #6fc676;
  color: black;
  font-family: georgia, serif;
}

.card-name {
  text-align:center;
}
#card1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

#card4 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px 2px #888888;
}

.contact-title {
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  color: black;
  font-family: garamond;
  grid-column: 1/4;
}

fieldset {
  border: 0px;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  margin: 0px auto;
  padding-left: 5px;
  padding-bottom: 5px;
}

.contact-form {
  margin: 3px;
  padding-left: 5px;
}

#contact input,
textarea {
  background: transparent;
  margin:3px;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
  font-family: georgia, serif;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: black;
  font-family: georgia, serif;
  font-size: 14px;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: black;
  font-family: georgia, serif;
  font-size: 14px;
}

.submit {
  text-align: center;
}

#submit-btn {
  text-align: center;
  margin: 5px auto;
  padding: 10px;
  display: inline-block;
  border-radius: 8px;
}

#submit-btn:hover {
  background-color: #888;
  opactity: 0.9;
}

.contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 15px 50px;
  margin: 0px 0px;
}

.link1 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link2 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link3 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.link4 {
  margin: 0px;
  justify-self: center;
  align-self: center;
}

.fa-facebook {
  background: #6fc676;
  color: white;
  padding: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.fa-facebook:hover{
  background:#a2e8ae;
}

.fa-linkedin {
  background: #6fc676;
  color: white;
  padding: 20px;
  border-radius: 50%;
  border: 2px solid white;
}

.fa-linkedin:hover{
  background:#a2e8ae;
}

.fa-github {
  border: 2px solid white;
  border-radius: 50%;
  padding: 20px;
  color: white;
  background-color: #6fc676;
}

.fa-github:hover{
  background:#a2e8ae;
}

.fa-free-code-camp {
  color: white;
  border: 2px solid white;
  background-color: #6fc676;
  border-radius: 50%;
  padding: 20px;
}

.fa-free-code-camp:hover{
  background:#a2e8ae;
}

footer {
  background-color: #6fc676;
  border-top: 2px solid white;
  text-align: center;
  color: white;
  padding: 25px 0px 10px 0px;
  margin: 0px;
}

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Mojo Design</title>
</head>

<body>

  <header>
    <div id="wrapper" class="wrapper">
      <div id="stuff">
        <h3 class="nav-name">Michael Blydenburgh</h3>
        <nav>
          <ul>
            <li><button class="nav-btn"><a href="#about">About</a></button></li>
            <li><button class="nav-btn"><a href="#portfolio">Portfolio</a></button></li>
            <li><button class="nav-btn"><a href="#contact">Contact</a></button></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>


<div class ="bg-img">
    <div class="about-wrapper" id="about">

      <div class="about-text">
        I am a classically trained chemical engineer hoping to take my career in a new direction. Current experience is in front-end development, with basic server side knowledge and a desire to continue professional growth. Please feel free to contact me to
        discuss what assistance you are looking for!
      </div>
      <div class="about-pic">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1780363/mike.jpg" alt="Self Photograph" class="about-img">
      </div>
      <div class="skills">
        <hr>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>Javascript</li>
          <li>Python</li>
          <li>PHP</li>
        </ul>
      </div>
    </div>

    <h3 class="portfolio-title">Portfolio</h3>
    <div class="portfolio-wrapper" id="portfolio">
      <div class="card" id="card1">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1780363/tribute.JPG" alt="Page Preview" class="portfolio-img">
        <div class="card-name">
          <h5>Tribute to Umphreys McGee</h5>
        </div>
      </div>
      <div class="card" id="card2">
        <div class="card-name">
          <h5>Page2</h5>
        </div>
      </div>
      <div class="card" id="card3">
        <div class="card-name">
          <h5>Page3</h5>
        </div>
      </div>
      <div class="card" id="card4">
        <div class="card-name">
          <h5>Page4</h5>
        </div>
      </div>
    </div>

    <h3 class="contact-title">Contact & Social Media</h3>
    <div class="contact-wrapper" id="contact">

      <div class="contact-form">
        <form action="http:///www.example.com/contact.php">
          <fieldset>
            <label>
            <input type="text" name="name" size="40" placeholder="Enter Name" maxlength="100" id="name-form">
          </label>
            <br>
            <label>
            <input type="text" name="email" size="40" placeholder="Enter Email" maxlength="100" id="email-form">
          </label>
            <br>
            <label>
            <textarea name="message" cols="60" rows="5" class="message-form">Leave a message!</textarea>
          </label>
            <div class="submit">
              <input type="submit" value="Submit Message" id="submit-btn">
            </div>
          </fieldset>
        </form>
      </div>
      <div class="contact-links">
        <div class="link1"><a href="https://www.facebook.com/mblydenburgh" class="fa fa-facebook" target="blank"></a></div>
        <div class="link2"><a href="https://www.linkedin.com/in/michael-blydenburgh-99a68872/" class="fa fa-linkedin" target="blank"></a></div>
        <div class="link3"><a href="https://github.com/mikebly" class="fa fa-github" target="blank"></a></div>
        <div class="link4"><a href="https://www.freecodecamp.org/mikebly" class="fa fa-free-code-camp" target="blank"></a></div>
      </div>
    </div>


</div>


  <footer>
  Design and Coded by Michael Blydenburgh (2018)
  </footer>

</body>