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

Вот у меня есть меню на сайте,и допустим есть 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;
  display: inline-block;
  transition: color .2s;
  left:-270px
}

/*#9d999d*/
.menu-main a, .menu-main a:visited {color: #FAFFFB;} 
.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;
}
}