Вот у меня есть меню на сайте,и допустим есть 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;
}
}