오른쪽으로 범주를 이동하고 왼쪽에있는 기사를 왼쪽으로 HTML

Question

저는 기본적인 블로그 웹 사이트를 가지고 있으며 맨 아래에 범주를 이동하고 서로 아래에 표시하려고합니다. 그리고 나머지 공간에서는 내 기사가 나타나기를 바랍니다.

<main> 
 
    <div class="container body-content "> 
 
    <div class="row"> 
 
     <!--"style=width: 100%;"--> 
 

 
     <div class="col-md-8" th:each="article : ${articles}" style="float: left;"> <!--"style=width: 90%;"--> 
 
     <header> 
 
      <h2> 
 
      <a th:href="@{/article/{id}(id=${article.id})}" th:text="${article.name}"> 
 
      </a> 
 
      </h2> 
 
     </header> 
 
     </div> 
 

 

 
     <div class="col-md-4" th:each="category : ${categories}" style="float: right;"> 
 
     <header> 
 
      <h2> 
 
      <a th:href="@{/category/{id}(id=${category.id})}" th:text="${category.name + ' (' + #sets.size(category.articles) + ')'}"> 
 
      </a> 
 
      </h2> 
 
     </header> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</main>

그것은 작동하지 않습니다

. 그것은 페이지의 중앙에있는 2 행 3 열의 모든 여섯 가지 범주를 보여줍니다. https://imgur.com/Au5NbH4 내가 무엇을 놓치고 :

https://imgur.com/5Q1yuLH 내가이 원하는 :

나는이 있나요?

Answer 1

< div 태그를 변경하여 수정했습니다. 도움을 주신 모든 분들께