Элементы, попадающие внутрь тега div при использовании контекста

Мои страницы имеют нормальный макет, как показано ниже

enter image description here

При попытке включить календарь на /calendar url все, кажется, просто сжимается под вкладкой календаря.

enter image description here

views.py

@login_required
def calendar(request):
    context={}  
    results = get_events(request)
    #context['results'] = results
    d = date.today()
    print(d)
    cal = Calendar(d.year, d.month)
    html_cal = cal.formatmonth(results, withyear=True)
    context['calendar'] = mark_safe(html_cal)
    context['nmenu'] = 'calendar'
    editProfileForm = UserProfileForm(instance=request.user)
    context['editProfileForm'] = editProfileForm
    if request.method=="POST":
        if 'editProfileForm' in request.POST:
            editProfileForm = UserProfileForm(request.POST or None, request.FILES or None,instance=request.user)
            if editProfileForm.is_valid():
                editProfileForm.save()
                editProfileForm = UserProfileForm(instance=request.user)
                context['editProfileForm'] = editProfileForm
                context['is_post'] = False
                return render(request, "home.html", context)
            else:
                context['is_post'] = True
                context['editProfileForm'] = editProfileForm
                return render(request, "home.html", context)

    return render(request, 'home.html', context)

calendar.html

{% block content %}
    <style>
        .calendar {
          width: 98%;
          margin: auto;
          font-size: 13px;
        }
      
        .calendar tr, .calendar td {
          border: 1px solid black;
        }
      
        .calendar th {
          padding: 10px;
          text-align: center;
          font-size: 18px;
        }
      
        .calendar td {
          width: 200px;
          height: 150px;
          padding: 20px 0px 0px 5px;
        }
      
        .month {
          font-size: 25px;
        }
      
        .date {
          font-size: 16px;
        }
      
        ul {
          height: 100%;
          padding: 0px 5px 0px 20px;
        }
    
    </style>
    
        <h1>Calendar</h1>
        <button>+</button>
        {{calendar}}
    
    {% endblock %}
    <!-- <ul>
        {% for result in results %}
            <li>{{result.start.date}}{% if result.end.date %}-{% endif%}{{result.end.date}}: {{result.summary}}</li>
        {% endfor %}
    </ul> -->

sidebar.html:

Вернуться на верх