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

尝试从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>

​