Unable to center align two divs on a page

Question

I'm having some difficulty aligning two divs in the center of a page. Instead, it remains left. I've combed through this site, and others, and have tried several of the suggestions. I am thinking maybe I've bungled it by taking from several different examples and putting it to one, and something is negating the other? The divs just aren't aligning center on the page. I have the masking gif in one div, and the writing in another div, and placed those two divs within a container.

body {
  background-color: #000;
  color: white;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.container {
  margin: 70px;
  width: auto;
}

.one {
  width: 35%;
  max-width: 300px;
  min-width: 300px;
  padding: 5px;
  text-align: center;
  float: left;
}

.two {
  width: 35%;
  padding: 5%;
  max-width: 300px;
  min-width: 300px;
  float: left;
  background: black;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.gif {
  background: url("http://78.media.tumblr.com/072a9aee9e56415e20ffd06c3260c49d/tumblr_n85ga7OASY1qmxnvuo2_500.gif") repeat;
  background-position: 10px;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 200px;
  font-family: Fjalla One;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3;
  background-position-x: 50%;
  background-position-y: 50%;
}

<div class="container">
  <div class="one">
    <div class="gif">TXT</div>
  </div>

  <div class="two">
    <h3>Test //</h3>

    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>

Don't know why you accepted the answer below - doesn't seem to center your container, anyway here was my answer - was unable to post as question was closed: http://jsfiddle.net/yt6cbn3s/1/ The js box is my introduction paragraph stating what I have ddone — Pete, Jun 22 '18 at 15:08
Hi, @Pete, I'm sorry, I'm still very new to coding, and this website. My question was marked as duplicate, so I figured if what was given to me was able to fix my problem, I would mark it so I wasn't clogging up the feed. I tried it out the code given by billy.farrol and it fixed my problem though. Thank you so much for taking the time to answer, and also offering insight to it as well. I am now working through yours. — Gabriela Schiffer, Jun 22 '18 at 15:19

score 2 · Accepted Answer · answered Jun 22 '18 at 14:55

Change your container class like so (use Flex):

.container {

      display: flex;
      justify-content: center;
      align-items: center; 
    }

body {
  background-color: #000;
  color: white;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.container {
  
  display: flex;
  justify-content: center;
  align-items: center; 
}

.one {
  width: 35%;
  max-width: 300px;
  min-width: 300px;
  padding: 5px;
  text-align: center;
  float: left;
}

.two {
  width: 35%;
  padding: 5%;
  max-width: 300px;
  min-width: 300px;
  float: left;
  background: black;
  font-family: "Cutive One", monospace;
  font-size: 13px;
  text-align: justify;
  line-height: 1.5;
}

.gif {
  background: url("http://78.media.tumblr.com/072a9aee9e56415e20ffd06c3260c49d/tumblr_n85ga7OASY1qmxnvuo2_500.gif") repeat;
  background-position: 10px;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 200px;
  font-family: Fjalla One;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3;
  background-position-x: 50%;
  background-position-y: 50%;
}

<div class="container">
  <div class="one">
    <div class="gif">TXT</div>
  </div>

  <div class="two">
    <h3>Test //</h3>

    <ul>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
</div>

Unable to center align two divs on a page

1 Answers1