Как сделать так что бы на всех страницах ширина была одинаковая?

У меня есть шаблон в django,где выводятся статьи(по адресу 1 - выводится первая статья,по адресу 2 - вторая,но в одном шаблоне),и вот у меня есть меню на сайте(сверху) и допустим для одной из статей(допустим по адресу 2)ширина меню доходит до конца границы,а на другой статье(допустим с адресом статьи 1) у меня это меню выходит за границы(и внизу появляется пролистывание вправо,а мне такого не надо),соответственно я хочу сделать ширину поменьше,но если я сделаю поменьше меню для статьи с адресом 1,то для статьи с адресом 2 меню не будет доходить до конца,как мне так сделать что бы на всех страницах статей меню отображалось одинаково,при условии,что для все статей один шаблон,а создавать для каждой статьи шаблон - бред,ну вообщем как мне так сделать?Помогите пожалуйста!Если надо скину шаблон или что еще потребуется для ответа!

КОД ШАБЛОНА:

<!--СТАТЬИ-->

{% extends 'base.html' %}

{% block title %}{{article.article_title}}{% endblock %}

{% block content %}

<ul class="menu-main">
    <li><a href="http://127.0.0.1:8000/articles/">Главная</a ></li>
    <li><a href="http://127.0.0.1:8000/articles/article_list/" >Список статей</a></li>
    <li><a href="http://127.0.0.1:8000/articles/chat_search/">Чат</a></li>
    <li><a href="http://127.0.0.1:8000/articles/TopGames">Категории</a></li>
    <li><a href="http://127.0.0.1:8000/articles/AboutSite">О сайте</a></li>
  </ul>




<!--ОТОБРАЖЕНИЕ СТАТЕЙ-->
<h1 id = article_title>{{article.article_title}}</h1>

<h2 id = article_text>{{article.article_text}}</h2>

<em id = article_pubdate>{{article.pub_date}}</em> 

<h2 id = comment_name>Комментарии:</h2>


<!--ОТОБРАЖЕНИЕ КОММЕНТОВ-->
<hr id = 'hr_one'>

{% if test2 %}
     {% for c in test2  %}
    <p>
        <strong id = name_comment>{{c.author_name}}</strong>
        <p id = comment_text_article>{{c.comment_text}}</p>
    {% endfor  %}    
    </p>
{% else %}
<h2 id = 'comment_notfound_text'>Комментарии не найдены,станьте первым :)</h2> 
{% endif %}

<hr id = hr_two >


{% load static %}

<!--КНОПКИ ОТПРАВКИ КОММЕНТОВ-->
<form action="{% url 'articles:add_comment' article.id %}" method="POST">

{% csrf_token %}
<input id = 'input_name' type = 'text' required placeholder="Введите имя", name = 'name'><br><br>
<textarea name="text" required placeholder="Текст комментария" id="input_comment_text" cols="30" rows="10"></textarea><br><br>
<button id = 'input_button' type = 'submit'>Добавить комментарий</button>
</form>

<style type="text/css" >
/*body{background-color:#9C9CE4}*/
body{background-color:#9C9CE4}
#article_title { font-size: 30px; color: green; font-family: Arial, Helvetica, sans-serif; }
#article_text {color:black;font-size: 25px;font-family: 'Kaushan Script', cursive;}
#article_pubdate{color:red;font-size: 15px;font-family: Arial, Helvetica, sans-serif}
#name_comment{color:blue;font-size:24px;font-family: Arial, Helvetica, sans-serif}
#comment_text_article{color:black;font-size:20px;font-family: 'Kaushan Script', cursive;}
#comment_name{color:#E49C00;font-family: cursive;font-size: 30px; }
#input_name{color:white;background-color: black;font-size: 25px;font-family: 'Kaushan Script', cursive;,height: 35px;}
#input_comment_text{color:white;background-color: black;font-size: 25px;font-family: 'Kaushan Script', cursive;height: 200px;}
#input_button{color:white;background-color: black;font-size: 25px;font-family: 'Kaushan Script', cursive;}
#comment_notfound_text{color:#DCE400;font-family: 'Kaushan Script', cursive;font-size: 25px;}
#img1{position: absolute;left:1150px}
#hr_one{border:2px solid black}
#hr_two{border:2px solid black}

<!--Меню--
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');
.menu-main {
  position: relative;
  top:-39px;
  list-style: none;
  margin: 40px 0 5px;
  padding: 25px 0 5px;
  text-align: center;
  background: white;
  right: 6px;
  width: 1916px;
  
}
.menu-main li {display: inline-block;}
.menu-main li:after {
  position: relative;
  right: 300px;
  content: "|";
  color: #606060;
  display: inline-block;
  vertical-align:top;
  left:-270px
}
:after {content: none;}
.menu-main a {
  text-decoration: none;
  position: relative;
  right: 300px;
  font-family:'Kaushan Script', cursive;
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 20px;
  margin: 0 34px 0 30px;
  font-size: 17px;
  text-transform: uppercase;
  display: inline-block;
  transition: color .2s;
  left:-270px
}

/*#9d999d*/
.menu-main a, .menu-main a:visited {color: black;} 
.menu-main a.current, .menu-main a:hover{color: #feb386;}
.menu-main a:before,
.menu-main a:after {
  content: "";
  position: absolute;
  height: 4px;
  top: auto;
  right: 50%;
  bottom: -5px;
  left: 50%;
  background: #feb386;
  transition: .8s;
}

.menu-main a:hover:before, .menu-main .current:before {left: 0;}
.menu-main a:hover:after, .menu-main .current:after {right: 0;}   
@media (max-width: 550px) {
.menu-main {padding-top: 0;}
.menu-main li {display: block;}
.menu-main li:after {content: none;}
.menu-main a {
  padding: 25px 0 20px; 
  margin: 0 30px;
}
}
</style>




{% endblock %}