Stop div from moving and revealing parent background on responsive website

Question

Hello fellow stackers,

As the question alludes to, I'm attempting to make the .journal div stay in it's respective position, but every time the browser is resized it reveals the background of the parent div.

Has anyone got a fix for this?

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

尝试从top:400px

中删除.post-container

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>