title: Thymeleaf - what is the correct order of div classes for layout using multiple fragments?
body: <p>I am working on a Thymeleaf layout that should use the following default fragment:</p>
  
  <p><code>fragments/default.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"&gt;
  
  &lt;head th:include="fragments/common :: commonFragment" lang="en"&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;section id="header" th:replace="fragments/header :: headerFragment"&gt;&lt;/section&gt;
  &lt;section th:id="defaultFragment" th:fragment="defaultFragment"&gt;
      &lt;div layout:fragment="content"&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The header fragment is defined by the following html file:</p>
  
  <p><code>fragments/header.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:th="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head th:include="fragments/common :: commonFragment" lang="en"&gt;
      &lt;title &gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div th:id="headerFragment" th:fragment="headerFragment" &gt;
      &lt;div class="navbar navbar-fixed-top" &gt;
          &lt;div class="row text-center top-buffer-small bg-white"&gt;
              &lt;a href="index" th:href="@{/}"&gt;&lt;img width="310" th:src="@{/images/company_logo.png}"/&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row text-center nav-box bg-dark-blue row-fluid"&gt;
          &lt;div class="col-xs-1"&gt;&lt;/div&gt;
          &lt;div class="col-xs-10"&gt;
              &lt;div class="row top-buffer-small bottom-buffer-small"&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a class="banner-link" href="#" th:href="@{/reports/dashboard}"
                         &gt;DASHBOARD&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a class="banner-link" href="#" th:href="@{/admin/home}"
                         &gt;ADMIN&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a class="banner-link" th:href="@{/help/about}"
                         &gt;HELP&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-3"&gt;
                      &lt;a class="banner-link" th:href="@{/logout}"
                         &gt;LOGOUT&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-1"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the landing page, after login is:</p>
  
  <p><code>index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        xmlns:th="http://www.w3.org/1999/xhtml"
        layout:decorator="fragments/default"&gt;
  &lt;head lang="en"&gt;
      &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div layout:fragment="content"&gt;
      &lt;div class="row bg-medium"&gt;
          &lt;h1 class="top-buffer-small"&gt;&lt;&lt;system-name&gt;&gt;&lt;/h1&gt;
          &lt;p class="top-buffer-tiny"&gt;Lorem ipsum dolor sit amet,
              consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
              minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
          &lt;h3&gt;Juridictions&lt;/h3&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" th:href="&lt;forwarding-link&gt;"&gt;Jurisdiction A&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;..&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem I am having here is everything gets justified to the left while it should obey the classes defined on the divs. I have worked with Thymeleaf enough to know the layout is working, for the header is there, though with problematic rendering.</p>
  
  <p>And I can access all the JavaScript and CSS files defined on the file I include at the head of the default and header fragments, <code>fragments/common.html</code>.</p>
  
  <p>I also imagine this is something very simple to work out, but I am banging my head on the table for a while on this. What am I not seeing here?</p>