背景图像问题

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班级＆＃39; position: absolute;值。

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

所以，我将其更改为相对于元素当前位置定位的relative。

同时查看此链接css_positioning

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>