Блог

У меня есть неупорядоченный список ul с li внутри него, и когда я добавляю еще один li внутри ul, он падает в нижнюю часть страницы и находится за пределами родительского div, содержащего его, однако div имеет более чем достаточную высоту, чтобы содержать li, и он должен быть непосредственно под другим liлюбая помощь будет оценена спасибо, я знаю, что, вероятно, это что-то простое, чего мне не хватает

  <div class="username-review">
              <ul class="review-fields">
                <li class="review-content">
              <div class="review" clearfix>
                <div class="review-user-profile" clearfix>
                  <div class="profile-picture" clearfix>
                  </div>      
                    <div class="username">
                    <a href="usersname" class="usersname"> <span>Username</span></a> 
                    </div>
                   
                  <span class="users-review-overall-stars">
                      <i class="fas fa-star"></i> 
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                  </span>  
                  <div class="review-title-container">
                    <span class="review-title">Perfect item</span>
                  </div>  
                </div>
    
                <div class="users-review-info"> <!-- display the first 10 reviews and then have a see all reviews button -->
                  <p>Very good game perfect for beginners aswell as experienced players, great graphics and amazing content.</p>
                  <a class="user-review-actions" href="#">Like</a>
                  <a>amp;#124;</a>
                  <a class="user-review-actions" href="#">Dislike</a> 
                  <a>amp;#124;</a>
                  <a class="user-review-actions" href="#">Report</a>  
                </div>                        
              </div>
              
              <a class="see-all-reviews" href="#">See all reviews</a> 
            </div>
              </li>
            </ul>
          </div>  



.username-review {
  position: relative;
  width: 1050px;
  height: 990px;
  bottom: 1200px;
  left: 370px;
  border: 1px solid green;
}

.review-fields {
  display: block;
  width: 100%;
  height: 170px;
  border: 1px solid orange;
}

.review-content {
  list-style: none;
  height: 170px;
  width: 100%;
  border-bottom: 1px solid orangered;
}

.review {
  position: relative;
  width: 100%;
  height: 200px;
}

.review-user-profile {
  position: relative;
  width: 200px;
  height: 200px;
}

.profile-picture {
  position: relative;
  border: 1px solid orangered;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  top: 40px;
  left: 30px;
}

.username {
 position: relative;
 left: 90px; 
 top: 6px;
}

.usersname  {
  color: #fd886b;
}

.usersname:hover  {
  color: orangered;
}

.users-review-overall-stars {
  position: relative;
  top: 30px;
  left: 45px;
}

.review-title {
  position: relative;
  
}

.review-title-container {
  position: relative;
  text-align: center;
  top: 37px;
  height: 50px;
  font-weight: bold;
}

.users-review-info {
  position: relative;
  display: inline-block;
  width: 842px;
  height: 100%;
  bottom: 200px;
  left: 200px;
  text-align: center;
}

.users-review-info p {
  position: relative;
  top: 40px;
  left: 10px;
}

.users-review-info a {
  position: relative;
  top: 50px;
  margin-left: 15px;
  color: #fd886b;
}

.users-review-info a:hover {
  color: orangered;
}

.see-all-reviews {
  position: relative;
  top: 730px;
  left: 475px;
  color: #fd886b;
}

.see-all-reviews:hover {
  color: orangered;
}
  

У вас есть лишний, ненужный </div> над вашим </li> , который повреждает дерево DOM. Вы должны использовать HTML-линтер в своем редакторе.