django - ブートストラップ グリッドが期待どおりに機能しない

Question

メイン コンテンツとサイドウィジェットを同じ行に配置したい。ブートストラップ グリッドに関する私の知識で、これを機能させようとしましたが、サイドウィジェットはコンテンツの下にスタックされており、サイドにはスタックされていません。必要なスニペットは次のとおりです。

body.html

<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
  <div class="row">
    <div class="col-lg-8 ">
      {% block content %}
      {% endblock %}
    </div>
    <div class="col-lg-4">
       {% block sidewidget %}
       {% endblock %}
    </div>
  </div>
</div>

<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>

nav.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'add' %}">Add Article</a>
          </li>  
        {% endif %}
      </ul>
    </div>
  </div>

私の {% ブロック コンテンツ %}

{% for post in posts %}
      <h2 class="mt-4">{{post.title}}</h2>
      <!-- Author -->
      <p class="lead">
        by
        <a href="/author/{{post.author}}">{{post.author}}</a>
      </p>
      <hr>
      <!-- Date/Time -->
      <p class="lead">Published on <b>{{post.published_date}}</b></p>
      <hr>
      <!-- Preview Image -->
      <img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
      <p>{{post.images}}</p>

      {% for tag in post.tags.all %}
      <p>{{tag.name}}</p>
      {% endfor %}
      <hr>
      <!-- Post Content -->
      <p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
      <footer class="entry-footer">
        <a href="{{post.slug}}" class="btn-readmore"><button class="btn btn-primary">Read More</button></a>
      </footer>
      <hr>
{% empty %}
       <h1> Nothing to display</h1>
{% endfor %}  
{% endblock %}

私の {% Sidewidget %} ブロック

  <!-- Search Widget -->
  <div class="card my-4">
    <h5 class="card-header">Search</h5>
    <div class="card-body">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Go!</button>
        </span>
      </div>
    </div>
  </div>

  <!-- Categories Widget -->
  <div class="card my-4">
    <h5 class="card-header">Categories</h5>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-6">
          <ul class="list-unstyled mb-0">
            <li>
              <a href="#">Web Design</a>
            </li>
            <li>
              <a href="#">HTML</a>
            </li>
            <li>  
              <a href="#">Freebies</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-6">
          <ul class="list-unstyled mb-0">
            <li>
              <a href="#">JavaScript</a>
            </li>
            <li>
              <a href="#">CSS</a>
            </li>
            <li>
              <a href="#">Tutorials</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Side Widget -->
  <div class="card my-4">
    <h5 class="card-header">Side Widget</h5>
    <div class="card-body">
      You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
    </div>
  </div>
{% endblock %}

微調整を試みましたが、何も機能していないようです

次のようなページが必要です。

|*****************************|  
|navigationbar                | 
|*****************************|
|Post1(Col1-Col8)  |SIDEWIDGET| 
|*****             |          |
|Post2(Col1-Col8)  |          |
|*****             |          |
|PostN(Col1-Col8)  |          |
|*****************************|
|Footer                       |