Я работаю с дочерней темой Twenty Twelve wordpress, и когда я добавляю границу на панель навигации, левый край границы выравнивается с изображением заголовка, которое сдвигает правую сторону. Как мне центрировать это, расширяя границу на 2 пикселя с каждой стороны?
Это можно увидеть вживую на сайте www.valuetactics.com
Я попытался увеличить изображение заголовка до 1004 пикселей, но это не дало никакого эффекта.
Вот моя дочерняя тема .css
@import url("../twentytwelve.1.6/twentytwelve/style.css");
body.custom-font-enabled {
font-family: Helvetica, Arial, sans-serif;
}
/* Increase theme width to 1000px */
@media screen and (min-width: 960px) {
.site {
max-width: 1000px;
max-width: 71.4285rem;
}
}
.ie .site { max-width: 1000px; }
footer[role="contentinfo"] {
max-width: 1000px;
max-width: 71.4285rem;
}
/* Left & Right Sidebars */
@media screen and (min-width: 600px) {
.custom-layout .site-content {
width: 50%;
margin-left: 25%;
}
.custom-layout .widget-area {
position: relative;
width: 20%;
}
.custom-layout #extra-sidebar {
float: left;
margin-left: -75%;
width: 20%;
}
}
/* IE8 and IE7 - Left and Right Sidebars */
.ie .custom-layout .site-content {
width: 50%;
margin-left: 25%;
}
.ie .custom-layout .widget-area {
float: right;
width: 20%;
position: relative;
}
.ie .custom-layout #extra-sidebar {
float: left;
margin-left: -75%;
width: 20%;
}
/*Ross customizations: */
body .site {
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
margin-bottom: 3.42857rem;
margin-top: 3.42857rem;
padding: 0 2.85714rem;
}
.main-navigation {
margin-top: -65px;
text-align: center;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
background: rgba(0,0,0,0.7);
border: 2px solid #C4F4FF;
border-radius: 4px;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation li a {
border-bottom: 0;
margin-left: 20px;
color: #C4F4FF;
font-weight:bold;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover,
.main-navigation li a:focus {
color: #C4F4FF;
}
@import url('../twentytwelve/style.css');
body .headerContent {
margin-top:0px;
margin-bottom:0px;
overflow:visible;
}
body .site {
box-shadow:none;
}
#page {
margin-top:0px;
}
.headerContent, .headerWrapper {
background:#E6E6E6;
}
.main-navigation ul {
margin: 0;
}
.site-header {
padding: 0;
margin-bottom: 5px;
}
/* Sidebar */
.widget-area .widget {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding: 10px;
border: 1px solid;
border-color: blue;
border-radius: 3px;
margin-top: 12px;
margin-top: 1.7rem;
margin-bottom: 24px;
margin-bottom: 1.7rem;
word-wrap: break-word;
background: lightblue;
}
.header-image {
margin-top: -3px;
}
Вот как это выглядит с границей: 20 пикселей, чтобы проиллюстрировать проблему более наглядно: http://s22.postimg.org/st72q5fy9/menubarfail.jpg
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
background: rgba(0,0,0,0.7);
border: 20px solid #C4F4FF;
border-radius: 4px;
display: inline-block !important;
text-align: left;
width: 100%;
}