Hubble Landing

Community feedback

• 

  Joyce Tagbovi•55

  @joycetagboviPosted over 4 years ago

  Thanks, works perfectly. I used the margin-left rather than both the left and right margin.

  1
• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 4 years ago

  Hi Joyce, try this out in place of lines 127-146 in your style.css file:

  .two {
      margin-top: -100px;
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
  }
  
  .box {
      padding: 20px;
      width: 500px;
      height: 200px;
      background: #fdfdfd;
      box-shadow: 0 10px 24px -5px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(0,0,0,.125);
      border-radius: 10px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
  } 
  

  What I did was remove the declared margin-left: 400px for the box, and added auto to left and right margins. For the parent element .two, add 0 to left and right. [Here] (https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/) is a great article for absolute positioning. Hope this helps!

  0