Почему на сайте сдвигается меню?

Вот у меня есть меню на сайте,и допустим есть 2 страницы(2 шаблона) в которых отображается это меню,для каждого шаблона я прописал один и тот-же код(который внизу),но на одной странице это меню нормальное и не переходит границу,а на второй странице - меню не доходит до границы,и расположено не так как на первой,хотя характеристики меню одинаковые.Почему так происходит? (вот его код html и css) HTML:

<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>
CSS:

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');
.menu-main {
  position: relative;
  top:-41px;
  list-style: none;
  margin: 40px 0 5px;
  padding: 25px 0 5px;
  text-align: center;
  background: #111212;
  width: 1920px;
  right: 10px;
  
 
}
.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;