html - 阻止 div 在响应式网站上移动和显示父级背景

Question

大家好，各位堆垛机，

正如问题所暗示的，我试图让 .journal div 保持在其各自的位置，但每次调整浏览器大小时，它都会显示父 div 的背景。

有没有人解决这个问题？

html {
  position: relative;
  min-height: 100%;
}
.container1 {
  width: auto;
  background-color: #232323;
  max-width: 100%;
  width: 100%;
  display: flex;
  font-family: 'Lekton';
  padding-top: 1%;
  padding-bottom: 1%;
}
.footer {
  display: -ms-flexbox;
  width: 80%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
}
.container1 p {
  color: #fff;
  font-size: 1em;
}
.flex-item:nth-child(1) {
  color: #fff;
  text-transform: lowercase;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 5 0 auto;
  -ms-flex: 5 0 auto;
  flex: 5 0 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flex-item:nth-child(2) {
  color: #fff;
  text-transform: lowercase;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 5 0 auto;
  -ms-flex: 5 0 auto;
  flex: 5 0 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flex-item:nth-child(2) a {
  color: #fff;
  text-decoration: none;
}
.flex-item:nth-child(3) {
  color: #fff;
  padding-bottom: .04%;
  border-bottom: 1px solid white;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: baseline;
  -ms-flex-item-align: baseline;
  align-self: baseline;
}
.flex-item:nth-child(3) a {
  color: #fff;
  text-decoration: none;
}
.journal {
  max-width: 100%;
  margin: 0 auto;
  height: 1500px;
  margin-top: 80px;
  display: block;
  width: 90%;
  background-color: #7f73ba;
  position: relative;
}
.blogpost {
  width: 33.33%;
  overflow: hidden;
  position: relative;
  float: left;
  left: 0px;
  top: 0px;
}
@media (max-width: 800px) {
  .blogpost {
    height: 15%;
  }
}
@media (max-width: 1200px) {
  .blogpost {
    width: 50%;
  }
}
@media (max-width: 800px) {
  .blogpost {
    width: 100%;
  }
}
/*Tags*/

.journal-tags a {
  color: #fff;
  font-size: 14px;
  padding-left: 70%;
  font-weight: normal;
  padding-right: 3%;
  font-family: 'Lekton';
  text-decoration: none;
}
.journal-tags a:hover {
  color: #7f73ba;
  background-color: #fff;
}
/*Title*/

.journal-title > h3 {
  font-family: 'Proxima Nova' sans-serif;
  text-align: center;
  margin-top: 10px;
}
.journal-title > h3 a {
  text-decoration: none;
  color: #000;
  font-size: 45px;
  line-height: 45px;
}
@media (max-width: 1200px) {
  .journal-title > h3 a {
    font-size: 35px;
    line-height: 35px;
  }
}
@media (max-width: 800px) {
  .journal-title > h3 a {
    font-size: 25px;
    line-height: 25px;
  }
}
@media (max-width: 800px) {
  .journal-title > h3 {
    margin-top: 0px;
  }
}
@media (max-width: 800px) {
  .journal-title {}
}
.flex-container {
  background-color: red;
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.goodbye {
  position: fixed;
  bottom: 0px;
  text-align: center;
  margin: 0 auto;
  background-color: #fd665c;
  width: 100%;
  z-index: 9;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fefd32;
  text-align: center;
}
}
.goodbye a {
  font-size: 5em;
  z-index: 9999999999;
  font-family: 'brandon-grotesque';
}
.text-go {
  margin: 0 auto;
  padding-bottom: 15%;
  top: 0;
  text-align: center;
  color: #fefd32;
  width: 100%;
  font-size: 7em;
  font-family: 'Proxima Nova';
}
@media (max-width: 500px) {
  .text-go {
    font-size: 6em;
  }
}
.text-go h6 {
  color: #bbb;
  font-size: 18px;
}
.text-go a {
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}
.nice-line {
  width: 80%;
  height: 1px;
  background-color: #f6f6f6;
}
.text-go a:hover {
  border-bottom: 1px solid #fefd32;
}
.block-title {
  float: left;
  width: 100%;
  height: 88px;
}
.block-title a {
  color: #ff0;
  text-decoration: none;
  z-index: 9999;
}
.link1 {
  width: 25%;
  height: 100%;
  padding-bottom: 1%;
  padding-top: 1%;
  float: left;
  background-color: yellow;
  font-family: 'brandon-grotesque';
  margin-top: 0;
  position: relative;
}

.byebye {
  position: relative;
}
.contact ul,
ul,
ul.proficient {
  list-style-type: none
}

.Biographical-Content a,
.contact li,
.contact li a,
.contact ul,
.endh4 a,
.footer,
.item-type-double .item-hover,
.overlay ul li a,
.registry-description p a,
.registry-description p a:hover {
  text-decoration: none
}
article,
aside,
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
label,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
th,
ul {
  margin: 0;
  padding: 0;
  border: 0
}
html body {
  width:100%;
  position:relative;
  background-color:#fd665c;
}



body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:1rem;
  font-weight:500;
  font-family:brandon-grotesque,
  brandon-grotesque,
  Futura,
  sans-serif
}

h2 {
  font-size:1.875em
}
p {
  font-size:.875em
}
.other-contain {
  width:100%;
  position:relative;
  display:block;
  background-color:#fff;
}
.My-Gems {
  width:100%;
  height:100%;
  text-align:center;
  margin:0 auto;
  background-color:transparent;
  overflow:hidden;
}
@media screen and (max-width: 444px) {
  .My-Gems {
    width:100%
  }
}
@media screen and (max-width: 333px) {
  .My-Gems {
    width:100%
  }
}

.global-container {
  width:100%;
  z-index:9999;
  position:relative;
  text-align:center;
  margin:0 auto;
  background-color:#7f73ba;
}
.high-container {
  width:100%;
  position:relative;
  background-color:transparent;
  height:4900px;
}
.content-container,
.post-container {
  text-align:center;
  width:100%;
  top:0;
  display:block;
  background-color:#f1f1f1;
  height:100%;
  margin:0;
  position:relative
}
.post-container {
  z-index:0;
  top:400px;
  padding-bottom:10%;
  max-height:100%;
}

.container {
  width:100%;
  margin:0 auto;
  color:#000;
  text-align:left;
  margin-top:50px;
  font-family:'Roboto',
  sans-serif;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out
}
.eee {
  width:100%;
  margin:0 auto;
  background-color:#7f73ba;
}
.ready {
  font-family:'Proxima Nova' sans-serif;
  font-size:3em;
  text-align:center;
  font-weight:400;
  color:#fff;
}
.underline {
  background-color:#fd665c;
  width:55px;
  height:8px;
  margin:0 auto;
  display:block;
  position:relative;
  text-align:center;
}
@media only screen and (max-width: 555px) {
  .underline {
    width:35px;
    height:6px;
  }
}
.container p {
  -moz-columns:2;
  -webkit-columns:2;
  columns:2;
}
.Biographical-Content {
  z-index:99999;
  display:block;
  top:-350px;
  position:relative;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out;
  transition:all .3s ease-out;
  font-family:brandon-grotesque,
  brandon-grotesque,
  Futura,
  sans-serif;
  width:55%;
  margin-left:auto;
  text-align:center;
  padding:0;
  margin-right:auto
}
@media (max-width: 444px) {
  .Biographical-Content {
    top:-365px
  }
}
@media (max-width: 333px) {
  .Biographical-Content {
    top:-375px
  }
}
.Biographical-Content p {
  margin-top:20px;
  padding:0;
  transition:all .3s ease-out;
  font-size:20px;
  line-height:2em
}
.Biographical-Content a,
.Biographical-Content p {
  color:#000;
  margin-top:50px;
  font-family:'Roboto',
  sans-serif;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out
}
@media (max-width: 1111px) {
  .Biographical-Content {
    width:70%
  }
  .Biographical-Content p {
    font-size:18px;
    line-height:1.8em
  }
}
@media (max-width: 999px) {
  .Biographical-Content {
    width:75%
  }
  .Biographical-Content p {
    font-size:17px;
    line-height:1.6em
  }
}
@media (max-width: 555px) {
  .Biographical-Content p {
    margin-top:15px;
  }
  .Biographical-Content {
    width:80%
  }
}
@media (max-width: 777px) {
  .Biographical-Content p {
    margin-top:18px;
  }
}
@media (max-width: 444px) {
  .Biographical-Content p {
    font-size:13px;
    line-height:1.4em
  }
  .Biographical-Content {
    width:85%
  }
}
.Biographical-Content a {
  cursor:pointer;
  color:#fd665c;
  transition:all .3s ease-out
}
.hide,
.overlay-hugeinc {
  visibility:hidden
}

.item {
  text-align:center;
  transition:all .3s ease-out;
  float:left;
  position:relative;
  width:50%;
  height:100%
}
.item-hover,
.item-hover .mask,
.item-img,
.item-info {
  width:100%;
  height:100%
}
.item-hover,
.item-hover .mask {
  position:absolute;
  top:0;
  height:100%;
  left:0
}
.item-type-double .item-hover {
  z-index:5;
  -webkit-transition:all 300ms ease-out;
  -moz-transition:all 300ms ease-out;
  -o-transition:all 300ms ease-out;
  transition:all 300ms ease-out;
  opacity:0;
  cursor:pointer;
  display:block;
  text-align:center
}
.item-type-double .item-info {
  color:#fff;
  display:table;
  position:relative;
  z-index:5
}
.item-type-double .item-info div.mycell {
  vertical-align:middle;
  height:100%;
  display:table-cell
}
.item-type-double .item-info .headline {
  font-size:2.4em;
  font-family:'Proxima Nova' sans-serif;
  text-transform:uppercase;
  width:90%;
  margin:0 auto
}
@media (max-width: 500px) {
  .item {
    width:100%;
    height:100%
  }
}
@media (max-width: 888px) {
  .item-type-double .item-info .headline {
    font-size:1.8em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 666px) {
  .item-type-double .item-info .headline {
    font-size:1.4em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 444px) {
  .item-type-double .item-info .headline {
    font-size:1.3em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 390px) {
  .item-type-double .item-info .headline {
    font-size:.8em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 333px) {
  .item-type-double .item-info .headline {
    font-size:.6em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 222px) {
  .item-type-double .item-info .headline {
    font-size:.5em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
.item-type-double .item-info .date {
  font-size:20px;
  font-family:Canter;
  text-transform:uppercase
}
@media (max-width: 444px) {
  .item-type-double .item-info .date {
    font-size:16px;
    text-transform:uppercase
  }
}
@media (max-width: 333px) {
  .item-type-double .item-info .date {
    font-size:10px;
    text-transform:uppercase
  }
}
.item-type-double .item-hover .mask {
  background-color:#000;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity:.5;
  z-index:0
}
.item-type-double .item-hover:hover .line {
  width:90%
}
.item-type-double .item-hover:hover {
  opacity:1
}
.item-img {
  width:100%;
  z-index:0
}
.item-img img {
  width:100%;
  display:block
}
.hidden {
  opacity:0
}
.visible {
  opacity:1
}
.end {
  min-height:5vh;
  display:block;
  position:relative;
  text-align:center;
  transition:all .3s ease-out;
  line-height:5vh;
  font-family:brandon-grotesque,
}
.end,
.endh4:hover {
  color:#fff;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out
}
.endh4 {
  font-family:brandon-grotesque;
  color:#fff
}
.endh4:hover {
  cursor:pointer;
  transition:all .3s ease-out
}
.endh4 a {
  color:#fff
}
.effects .img {
  position:relative;
  float:left;
  width:50%;
  overflow:hidden;
}
.effects .img img {
  display:block;
  margin:0;
  width:100%;
  padding:0;
  max-width:100%;
  height:auto;
}
.overlay5 {
  display:block;
  position:absolute;
  z-index:20;
  background:rgba(0,
  0,
  0,
  0.3);
  overflow:hidden;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s;
}
a.expand {
  display:block;
  position:absolute;
  text-transform:uppercase;
  padding:1%;
  z-index:100;
  text-align:center;
  color:#fff;
  font-family:'Lekton',
  sans-serif;
  text-decoration:none;
  font-weight:600;
  font-size:35px;
}
#effect-6 .overlay5 {
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity:0;
}
#effect-6 .overlay5 a.expand {
  left:0;
  right:0;
  top:0;
  margin:0 auto;
  opacity:0;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s;
}
#effect-6 .img.hover .overlay5 {
  opacity:1;
}
#effect-6 .img.hover .overlay5 a.expand {
  top:50%;
  margin-top:-30px;
  opacity:1;
}
@media only screen and (max-width: 1100px) {
  .effects .img {
    width:50%;
  }
}
@media only screen and (max-width: 1100px) {
  a.expand {
    font-size:27px;
    padding:10px;
  }
}
@media only screen and (max-width: 520px) {
  .effects .img {
    width:100%;
  }
}
@media only screen and (max-width: 520px) {
  a.expand {
    font-size:25px;
  }
}

<div class="high-container">
  <div class="global-container">





    <div class=content-container>

      <div class=row>

        <div class="border red"></div>
        <h1 class="title-role">

Hello Stackers
</h1>




      </div>

      <div class=post-container>

        <div class=Biographical-Content>

          <div class="step out-view"></div>
          <!--Image-->
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec leo vitae ligula mattis aliquet nec vitae risus. Pellentesque accumsan tempus fermentum. Suspendisse placerat, tortor lobortis convallis tincidunt, lorem nisl egestas tortor,
            eget pharetra magna dolor ac lorem. In hac habitasse platea dictumst. Integer vitae ipsum consequat, laoreet ligula nec, rutrum lectus. Nulla fringilla, lectus sed malesuada interdum, risus mi bibendum mi, nec facilisis urna arcu in lectus.
            Suspendisse erat ex, eleifend et lorem non, pulvinar volutpat lorem. Pellentesque gravida euismod nulla, scelerisque placerat nibh facilisis a. Ut eleifend interdum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            <!--<div class="container">
  <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a> This website has been recently created so content is being added concurrently.
</p>
</div>-->
        </div>

      </div>
    </div>

    <div class="other-contain">
      <div class="workwork">

      </div>

      <div class="My-Gems">

        <div id="effect-6" class="effects clearfix">


          <div class="img">
            <img src="http://www.savoringthesweetlife.com/Portfolio/I-Do-Wedding-Portfolio/i-XbTmRFg/0/L/www.SavoringTheSweetLife.com%20Photography%20Wedding%20of%20Marianne%20and%20Dana-429-L.jpg" style="height:100%;" alt="">
            <div class="overlay5">
              <a href="#" class="expand">The Wedding of The Year</a>
            </div>
          </div>
          <div class="img">
            <img src="http://kadeem.london/Image/Money-Matters-Logo.png" alt="">
            <div class="overlay5">
              <a href="#" class="expand">Money Matters</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="eee">

      <div class="ready">
        <div class="underline"></div><a>Posts</a>

        <div class="journal">
          <div class="blogpost b1">
            <div class="journal-tags">
              <a href="#">Design</a>
            </div>
            <div class="journal-title">
              <h3><a href="">The Fwad Logo</a></h3>

            </div>

          </div>


          <div class="blogpost b2">
            <div class="journal-tags">
              <b><a href="#">Event</a></b>
            </div>
            <div class="journal-title">
              <h3><a href="">Contrabang: The Event</a></h3>
            </div>

          </div>
          <div class="blogpost b3">
            <div class="journal-tags">
              <a href="#">Marketing</a>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/opinions/who-you-are-is-where-you-ve-been">Becoming a Brand: The Dos and Don'ts</a></h3>
            </div>

          </div>
          <div class="blogpost b4">

            <div class="journal-tags">
              <b><a href="#">Journal</a></b>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/opinions/3-things-brands-can-learn-from-caitlyn-jenner">The Political Implications of Events</a></h3>
            </div>

          </div>
          <div class="blogpost b5">
            <div class="journal-tags">
              <a href="#">Urban</a>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/opinions/the-chancellor-s-googly-re-emphasises-insurance-s-need-for-content">Rebranding London</a></h3>
            </div>

          </div>
          <div class="blogpost b6">
            <div class="journal-tags">
              <a href="#">Marketing</a>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/work/meet-the-boss">Digital Content: The Ebook</a></h3>
            </div>

          </div>

        </div>




      </div>

    </div>
    <!--My Gems-->

  </div>
  <!--Post Container-->
</div>
<!--Content Container-->
</p>
</p>
</div>
</div>
</div>


<body>




</body>

<footer class="goodbye">

  <div class="text-go">LOREM
    <h6 style="color:#fff;">
Lorem ipsum dolor sit amet..<br> 

   </h6>
  </div>



  <div class="container1">


    <footer class="footer">
      <div class="container1">
        <div class="flex-item">Lorem</div>
        <!--   <div class="flex-item"> <a href="NO">CNTRA</a> / <a href="">FWAD</a> / <a href="">UCOMPARE</a> / <a href="">BASE</a> / <a href="#">MIGHT</a> / <a href="">CONTRABANG</a> / <a href="">FACE</a> / <a href="">BLOOOOM </a></div>
        <div class="flex-item"><a href="mailto:kadeemlaurie@gmail.com">contact@kadeem.london</a></div>-->
      </div>
    </footer>
  </div>
  </div>

Answer 1

尝试从 .post-container 中删除 top:400px

html {
  position: relative;
  min-height: 100%;
}
.container1 {
  width: auto;
  background-color: #232323;
  max-width: 100%;
  width: 100%;
  display: flex;
  font-family: 'Lekton';
  padding-top: 1%;
  padding-bottom: 1%;
}
.footer {
  display: -ms-flexbox;
  width: 80%;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
}
.container1 p {
  color: #fff;
  font-size: 1em;
}
.flex-item:nth-child(1) {
  color: #fff;
  text-transform: lowercase;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 5 0 auto;
  -ms-flex: 5 0 auto;
  flex: 5 0 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flex-item:nth-child(2) {
  color: #fff;
  text-transform: lowercase;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 5 0 auto;
  -ms-flex: 5 0 auto;
  flex: 5 0 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flex-item:nth-child(2) a {
  color: #fff;
  text-decoration: none;
}
.flex-item:nth-child(3) {
  color: #fff;
  padding-bottom: .04%;
  border-bottom: 1px solid white;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: baseline;
  -ms-flex-item-align: baseline;
  align-self: baseline;
}
.flex-item:nth-child(3) a {
  color: #fff;
  text-decoration: none;
}
.journal {
  max-width: 100%;
  margin: 0 auto;
  height: 1500px;
  margin-top: 80px;
  display: block;
  width: 90%;
  background-color: #7f73ba;
  position: relative;
}
.blogpost {
  width: 33.33%;
  overflow: hidden;
  position: relative;
  float: left;
  left: 0px;
  top: 0px;
}
@media (max-width: 800px) {
  .blogpost {
    height: 15%;
  }
}
@media (max-width: 1200px) {
  .blogpost {
    width: 50%;
  }
}
@media (max-width: 800px) {
  .blogpost {
    width: 100%;
  }
}
/*Tags*/

.journal-tags a {
  color: #fff;
  font-size: 14px;
  padding-left: 70%;
  font-weight: normal;
  padding-right: 3%;
  font-family: 'Lekton';
  text-decoration: none;
}
.journal-tags a:hover {
  color: #7f73ba;
  background-color: #fff;
}
/*Title*/

.journal-title > h3 {
  font-family: 'Proxima Nova' sans-serif;
  text-align: center;
  margin-top: 10px;
}
.journal-title > h3 a {
  text-decoration: none;
  color: #000;
  font-size: 45px;
  line-height: 45px;
}
@media (max-width: 1200px) {
  .journal-title > h3 a {
    font-size: 35px;
    line-height: 35px;
  }
}
@media (max-width: 800px) {
  .journal-title > h3 a {
    font-size: 25px;
    line-height: 25px;
  }
}
@media (max-width: 800px) {
  .journal-title > h3 {
    margin-top: 0px;
  }
}
@media (max-width: 800px) {
  .journal-title {}
}
.flex-container {
  background-color: red;
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.goodbye {
  position: fixed;
  bottom: 0px;
  text-align: center;
  margin: 0 auto;
  background-color: #fd665c;
  width: 100%;
  z-index: 9;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fefd32;
  text-align: center;
}
}
.goodbye a {
  font-size: 5em;
  z-index: 9999999999;
  font-family: 'brandon-grotesque';
}
.text-go {
  margin: 0 auto;
  padding-bottom: 15%;
  top: 0;
  text-align: center;
  color: #fefd32;
  width: 100%;
  font-size: 7em;
  font-family: 'Proxima Nova';
}
@media (max-width: 500px) {
  .text-go {
    font-size: 6em;
  }
}
.text-go h6 {
  color: #bbb;
  font-size: 18px;
}
.text-go a {
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}
.nice-line {
  width: 80%;
  height: 1px;
  background-color: #f6f6f6;
}
.text-go a:hover {
  border-bottom: 1px solid #fefd32;
}
.block-title {
  float: left;
  width: 100%;
  height: 88px;
}
.block-title a {
  color: #ff0;
  text-decoration: none;
  z-index: 9999;
}
.link1 {
  width: 25%;
  height: 100%;
  padding-bottom: 1%;
  padding-top: 1%;
  float: left;
  background-color: yellow;
  font-family: 'brandon-grotesque';
  margin-top: 0;
  position: relative;
}

.byebye {
  position: relative;
}
.contact ul,
ul,
ul.proficient {
  list-style-type: none
}

.Biographical-Content a,
.contact li,
.contact li a,
.contact ul,
.endh4 a,
.footer,
.item-type-double .item-hover,
.overlay ul li a,
.registry-description p a,
.registry-description p a:hover {
  text-decoration: none
}
article,
aside,
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
label,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
th,
ul {
  margin: 0;
  padding: 0;
  border: 0
}
html body {
  width:100%;
  position:relative;
  background-color:#fd665c;
}



body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:1rem;
  font-weight:500;
  font-family:brandon-grotesque,
  brandon-grotesque,
  Futura,
  sans-serif
}

h2 {
  font-size:1.875em
}
p {
  font-size:.875em
}
.other-contain {
  width:100%;
  position:relative;
  display:block;
  background-color:#fff;
}
.My-Gems {
  width:100%;
  height:100%;
  text-align:center;
  margin:0 auto;
  background-color:transparent;
  overflow:hidden;
}
@media screen and (max-width: 444px) {
  .My-Gems {
    width:100%
  }
}
@media screen and (max-width: 333px) {
  .My-Gems {
    width:100%
  }
}

.global-container {
  width:100%;
  z-index:9999;
  position:relative;
  text-align:center;
  margin:0 auto;
  background-color:#7f73ba;
}
.high-container {
  width:100%;
  position:relative;
  background-color:transparent;
  height:4900px;
}
.content-container,
.post-container {
  text-align:center;
  width:100%;
  top:0;
  display:block;
  background-color:#f1f1f1;
  height:100%;
  margin:0;
  position:relative
}
.post-container {
  z-index:0;
  /* top:400px; */
  padding-bottom:10%;
  max-height:100%;
}

.container {
  width:100%;
  margin:0 auto;
  color:#000;
  text-align:left;
  margin-top:50px;
  font-family:'Roboto',
  sans-serif;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out
}
.eee {
  width:100%;
  margin:0 auto;
  background-color:#7f73ba;
}
.ready {
  font-family:'Proxima Nova' sans-serif;
  font-size:3em;
  text-align:center;
  font-weight:400;
  color:#fff;
}
.underline {
  background-color:#fd665c;
  width:55px;
  height:8px;
  margin:0 auto;
  display:block;
  position:relative;
  text-align:center;
}
@media only screen and (max-width: 555px) {
  .underline {
    width:35px;
    height:6px;
  }
}
.container p {
  -moz-columns:2;
  -webkit-columns:2;
  columns:2;
}
.Biographical-Content {
  z-index:99999;
  display:block;
  top:-350px;
  position:relative;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out;
  transition:all .3s ease-out;
  font-family:brandon-grotesque,
  brandon-grotesque,
  Futura,
  sans-serif;
  width:55%;
  margin-left:auto;
  text-align:center;
  padding:0;
  margin-right:auto
}
@media (max-width: 444px) {
  .Biographical-Content {
    top:-365px
  }
}
@media (max-width: 333px) {
  .Biographical-Content {
    top:-375px
  }
}
.Biographical-Content p {
  margin-top:20px;
  padding:0;
  transition:all .3s ease-out;
  font-size:20px;
  line-height:2em
}
.Biographical-Content a,
.Biographical-Content p {
  color:#000;
  margin-top:50px;
  font-family:'Roboto',
  sans-serif;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out
}
@media (max-width: 1111px) {
  .Biographical-Content {
    width:70%
  }
  .Biographical-Content p {
    font-size:18px;
    line-height:1.8em
  }
}
@media (max-width: 999px) {
  .Biographical-Content {
    width:75%
  }
  .Biographical-Content p {
    font-size:17px;
    line-height:1.6em
  }
}
@media (max-width: 555px) {
  .Biographical-Content p {
    margin-top:15px;
  }
  .Biographical-Content {
    width:80%
  }
}
@media (max-width: 777px) {
  .Biographical-Content p {
    margin-top:18px;
  }
}
@media (max-width: 444px) {
  .Biographical-Content p {
    font-size:13px;
    line-height:1.4em
  }
  .Biographical-Content {
    width:85%
  }
}
.Biographical-Content a {
  cursor:pointer;
  color:#fd665c;
  transition:all .3s ease-out
}
.hide,
.overlay-hugeinc {
  visibility:hidden
}

.item {
  text-align:center;
  transition:all .3s ease-out;
  float:left;
  position:relative;
  width:50%;
  height:100%
}
.item-hover,
.item-hover .mask,
.item-img,
.item-info {
  width:100%;
  height:100%
}
.item-hover,
.item-hover .mask {
  position:absolute;
  top:0;
  height:100%;
  left:0
}
.item-type-double .item-hover {
  z-index:5;
  -webkit-transition:all 300ms ease-out;
  -moz-transition:all 300ms ease-out;
  -o-transition:all 300ms ease-out;
  transition:all 300ms ease-out;
  opacity:0;
  cursor:pointer;
  display:block;
  text-align:center
}
.item-type-double .item-info {
  color:#fff;
  display:table;
  position:relative;
  z-index:5
}
.item-type-double .item-info div.mycell {
  vertical-align:middle;
  height:100%;
  display:table-cell
}
.item-type-double .item-info .headline {
  font-size:2.4em;
  font-family:'Proxima Nova' sans-serif;
  text-transform:uppercase;
  width:90%;
  margin:0 auto
}
@media (max-width: 500px) {
  .item {
    width:100%;
    height:100%
  }
}
@media (max-width: 888px) {
  .item-type-double .item-info .headline {
    font-size:1.8em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 666px) {
  .item-type-double .item-info .headline {
    font-size:1.4em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 444px) {
  .item-type-double .item-info .headline {
    font-size:1.3em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 390px) {
  .item-type-double .item-info .headline {
    font-size:.8em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 333px) {
  .item-type-double .item-info .headline {
    font-size:.6em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
@media (max-width: 222px) {
  .item-type-double .item-info .headline {
    font-size:.5em;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
  }
}
.item-type-double .item-info .date {
  font-size:20px;
  font-family:Canter;
  text-transform:uppercase
}
@media (max-width: 444px) {
  .item-type-double .item-info .date {
    font-size:16px;
    text-transform:uppercase
  }
}
@media (max-width: 333px) {
  .item-type-double .item-info .date {
    font-size:10px;
    text-transform:uppercase
  }
}
.item-type-double .item-hover .mask {
  background-color:#000;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity:.5;
  z-index:0
}
.item-type-double .item-hover:hover .line {
  width:90%
}
.item-type-double .item-hover:hover {
  opacity:1
}
.item-img {
  width:100%;
  z-index:0
}
.item-img img {
  width:100%;
  display:block
}
.hidden {
  opacity:0
}
.visible {
  opacity:1
}
.end {
  min-height:5vh;
  display:block;
  position:relative;
  text-align:center;
  transition:all .3s ease-out;
  line-height:5vh;
  font-family:brandon-grotesque,
}
.end,
.endh4:hover {
  color:#fff;
  -moz-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  -webkit-transition:all .3s ease-out
}
.endh4 {
  font-family:brandon-grotesque;
  color:#fff
}
.endh4:hover {
  cursor:pointer;
  transition:all .3s ease-out
}
.endh4 a {
  color:#fff
}
.effects .img {
  position:relative;
  float:left;
  width:50%;
  overflow:hidden;
}
.effects .img img {
  display:block;
  margin:0;
  width:100%;
  padding:0;
  max-width:100%;
  height:auto;
}
.overlay5 {
  display:block;
  position:absolute;
  z-index:20;
  background:rgba(0,
  0,
  0,
  0.3);
  overflow:hidden;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s;
}
a.expand {
  display:block;
  position:absolute;
  text-transform:uppercase;
  padding:1%;
  z-index:100;
  text-align:center;
  color:#fff;
  font-family:'Lekton',
  sans-serif;
  text-decoration:none;
  font-weight:600;
  font-size:35px;
}
#effect-6 .overlay5 {
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity:0;
}
#effect-6 .overlay5 a.expand {
  left:0;
  right:0;
  top:0;
  margin:0 auto;
  opacity:0;
  -webkit-transition:all 0.5s;
  -moz-transition:all 0.5s;
  -o-transition:all 0.5s;
  transition:all 0.5s;
}
#effect-6 .img.hover .overlay5 {
  opacity:1;
}
#effect-6 .img.hover .overlay5 a.expand {
  top:50%;
  margin-top:-30px;
  opacity:1;
}
@media only screen and (max-width: 1100px) {
  .effects .img {
    width:50%;
  }
}
@media only screen and (max-width: 1100px) {
  a.expand {
    font-size:27px;
    padding:10px;
  }
}
@media only screen and (max-width: 520px) {
  .effects .img {
    width:100%;
  }
}
@media only screen and (max-width: 520px) {
  a.expand {
    font-size:25px;
  }
}

<div class="high-container">
  <div class="global-container">





    <div class=content-container>

      <div class=row>

        <div class="border red"></div>
        <h1 class="title-role">

Hello Stackers
</h1>




      </div>

      <div class=post-container>

        <div class=Biographical-Content>

          <div class="step out-view"></div>
          <!--Image-->
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec leo vitae ligula mattis aliquet nec vitae risus. Pellentesque accumsan tempus fermentum. Suspendisse placerat, tortor lobortis convallis tincidunt, lorem nisl egestas tortor,
            eget pharetra magna dolor ac lorem. In hac habitasse platea dictumst. Integer vitae ipsum consequat, laoreet ligula nec, rutrum lectus. Nulla fringilla, lectus sed malesuada interdum, risus mi bibendum mi, nec facilisis urna arcu in lectus.
            Suspendisse erat ex, eleifend et lorem non, pulvinar volutpat lorem. Pellentesque gravida euismod nulla, scelerisque placerat nibh facilisis a. Ut eleifend interdum placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            <!--<div class="container">
  <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a> This website has been recently created so content is being added concurrently.
</p>
</div>-->
        </div>

      </div>
    </div>

    <div class="other-contain">
      <div class="workwork">

      </div>

      <div class="My-Gems">

        <div id="effect-6" class="effects clearfix">


          <div class="img">
            <img src="http://www.savoringthesweetlife.com/Portfolio/I-Do-Wedding-Portfolio/i-XbTmRFg/0/L/www.SavoringTheSweetLife.com%20Photography%20Wedding%20of%20Marianne%20and%20Dana-429-L.jpg" style="height:100%;" alt="">
            <div class="overlay5">
              <a href="#" class="expand">The Wedding of The Year</a>
            </div>
          </div>
          <div class="img">
            <img src="http://kadeem.london/Image/Money-Matters-Logo.png" alt="">
            <div class="overlay5">
              <a href="#" class="expand">Money Matters</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="eee">

      <div class="ready">
        <div class="underline"></div><a>Posts</a>

        <div class="journal">
          <div class="blogpost b1">
            <div class="journal-tags">
              <a href="#">Design</a>
            </div>
            <div class="journal-title">
              <h3><a href="">The Fwad Logo</a></h3>

            </div>

          </div>


          <div class="blogpost b2">
            <div class="journal-tags">
              <b><a href="#">Event</a></b>
            </div>
            <div class="journal-title">
              <h3><a href="">Contrabang: The Event</a></h3>
            </div>

          </div>
          <div class="blogpost b3">
            <div class="journal-tags">
              <a href="#">Marketing</a>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/opinions/who-you-are-is-where-you-ve-been">Becoming a Brand: The Dos and Don'ts</a></h3>
            </div>

          </div>
          <div class="blogpost b4">

            <div class="journal-tags">
              <b><a href="#">Journal</a></b>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/opinions/3-things-brands-can-learn-from-caitlyn-jenner">The Political Implications of Events</a></h3>
            </div>

          </div>
          <div class="blogpost b5">
            <div class="journal-tags">
              <a href="#">Urban</a>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/opinions/the-chancellor-s-googly-re-emphasises-insurance-s-need-for-content">Rebranding London</a></h3>
            </div>

          </div>
          <div class="blogpost b6">
            <div class="journal-tags">
              <a href="#">Marketing</a>
            </div>
            <div class="journal-title">
              <h3><a href="/blog/work/meet-the-boss">Digital Content: The Ebook</a></h3>
            </div>

          </div>

        </div>




      </div>

    </div>
    <!--My Gems-->

  </div>
  <!--Post Container-->
</div>
<!--Content Container-->
</p>
</p>
</div>
</div>
</div>


<body>




</body>

<footer class="goodbye">

  <div class="text-go">LOREM
    <h6 style="color:#fff;">
Lorem ipsum dolor sit amet..<br> 

   </h6>
  </div>



  <div class="container1">


    <footer class="footer">
      <div class="container1">
        <div class="flex-item">Lorem</div>
        <!--   <div class="flex-item"> <a href="NO">CNTRA</a> / <a href="">FWAD</a> / <a href="">UCOMPARE</a> / <a href="">BASE</a> / <a href="#">MIGHT</a> / <a href="">CONTRABANG</a> / <a href="">FACE</a> / <a href="">BLOOOOM </a></div>
        <div class="flex-item"><a href="mailto:kadeemlaurie@gmail.com">contact@kadeem.london</a></div>-->
      </div>
    </footer>
  </div>
  </div>