Элементы не будут складываться друг над другом

Question

Я пытаюсь добиться того же самого вида ТАБЛИЦЫ, как на рисунке 1, в настоящее время я нахожусь на рисунке 2.

Как мне добиться этого вида?Я использовал тот же HTML, что и человек на изображении 1, поэтому мне нужно сделать это с помощью CSS.

Я пытался использовать float / text-align, я не совсем уверен, как добиться этого эффекта.

Фактический шаблон сайта можно посмотреть здесь: https://empla.popitheme.com/v2/

Рисунок 1

Рисунок 2

    <section id="about">
    <div class="container col-6">
        <div class="row">
          <div class="col-5 about-photo">
            <a href="https://placeholder.com"><img src="http://via.placeholder.com/500x500" class="img-fluid"></a>
          </div>
          <div class="col-7 about-text">
            <h1>I'm <span class="text-primary">Oliver Stott</span></h1>
            <p>Web Design and Junior Web Developer</p>     
              <div class="col-8">
               <ul class="table">
                  <li>
                      <span><strong>Age</strong></span>
                      <span>19</span>
                  </li>
                  <li>
                      <span><strong>Address</strong></span>
                      <span>1234 Street, W3 Island</span>
                  </li>
                  <li>
                      <span><strong>Email</strong></span>
                      <span>contact@domain.com</span>
                  </li>
                  <li>
                      <span><strong>Phone</strong></span>
                      <span>+0123 456 789</span>
                  </li>
                  <li>
                      <span><strong>Website</strong></span>
                      <span>
                          <a href="#">http://www.envato.com</a>
                      </span>
                  </li>
              </ul>
              </div>

            </div>
          </div>
        </div>
      </div>   
  </section> 

Мой CSS

 #about .container{
        background-color: #fff;
        padding: 0;
        height: auto;
        margin: 20px auto;
        text-align: center;
        box-shadow: 0px 0px 40px -10px rgba(59,66,71,1);
        border: 0.5px solid #72A7A3;
    }
    .about-photo{
        height: auto;
        width: 100;
    }
    .table, h1, p{
        clear: both;
        float: left;
        padding-left: 0;
    }
    .about-text h1{
        padding-top: 20px;
    }
    .about-text p{
        padding-top: 10px;
        font-size: 1.2rem;
    }
    .table li{
        text-align: left;
        list-style-type: none;

    }
    span{
        padding-left: ;
        text-align: right;
    }

Answer 1

В вашем css для тега li установите padding, а также установите border-bottom.

, чтобы выровнять ваш li набор margin:0 в ul тег.

Возможно, это поможет.

Answer 2

Поскольку эти являются табличными данными, вы должны использовать структуру table (т. Е. Теги table и т. Д.).Я не хотел переписывать весь ваш код, поэтому я просто применил свойства таблицы к вашей разметке с помощью CSS:

(откройте его в полноэкранном режиме, чтобы увидеть его правильно, чтобы содержимое не выходило изконтейнер)

#about .container {
  background-color: #fff;
  padding: 0;
  height: auto;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0px 0px 40px -10px rgba(59, 66, 71, 1);
  border: 0.5px solid #72A7A3;
}

.about-photo {
  height: auto;
  width: 100px;
}

.table {
  display: table;
}

.table li {
  display: table-row;
}

.table li span {
  display: table-cell;
  text-align: left;
}

.table li span:first-child {
  min-width: 120px;
}

h1,
p {
  clear: both;
  float: left;
  padding-left: 0;
}

.about-text h1 {
  padding-top: 20px;
}

.about-text p {
  padding-top: 10px;
  font-size: 1.2rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-5 about-photo">
        <a href="https://placeholder.com"><img src="http://via.placeholder.com/500x500" class="img-fluid"></a>
      </div>
      <div class="col-7 about-text">
        <h1>I'm <span class="text-primary">Oliver Stott</span></h1>
        <p>Web Design and Junior Web Developer</p>
        <div class="col-8">
          <ul class="table">
            <li>
              <span><strong>Age</strong></span>
              <span>19</span>
            </li>
            <li>
              <span><strong>Address</strong></span>
              <span>1234 Street, W3 Island</span>
            </li>
            <li>
              <span><strong>Email</strong></span>
              <span>contact@domain.com</span>
            </li>
            <li>
              <span><strong>Phone</strong></span>
              <span>+0123 456 789</span>
            </li>
            <li>
              <span><strong>Website</strong></span>
              <span>
                          <a href="#">http://www.envato.com</a>
                      </span>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</section>