I've got this page that should be segmented. Using Bootstrap, there's a side block of col-sm-3 for the sidebar, and a body block of col-sm-9 for the main content. I thought if everything added up to 12 columns, everything would be OK, but when I input a nav div thing in the sideblock, it seems to just ignore the whole grid system and pushes the body block downwards, leaving a big empty space in front of the sidebar.

I'm still pretty new to all of this and haven't learned how to properly use css. I used the bootstrap CDN if that matters. Is there anyway to makes the sidebar and the main content share the same row using just the bootstrap CDN? If not, how would I go to implement the css properly in this case?

The block of html giving me problems:

```
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      {% block side_block %}
        {% get_category_list category %}
      {% endblock %}
    </div>
    <div class="col-sm-9 col-sm-offset-3">
      <div>
        {% block body %}{% endblock %}
      </div>
    </div>
  </div>
</div> 

```

and the block of code rendered by {% get\_category\_list category %}:

```
{% if cats %}
  <ul class="nav navbar-sidebar">
  {% for c in cats %}
    {% if c == act_cat %}<li class="active"> {% else %} <li>{% endif %}
    <a href="{% url 'category' c.slug %}">{{ c.name }}</a></li>
  {% endfor %}
{% else %}
  <li><strong>There are no categories present.</strong></li>
  </ul>
{% endif %}

```