как сделать чтобы 2 слогана оставались строго в центре друг под другом а дата слева?
Чтобы отступы не передвигали надписи.
body {
margin: 0;
padding: 0;
background-color: #FFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
height: 100%;
background: url(../img/zer2.jpg);
}
#header {
height: 130px;
background: url(../img/zer.jpg);
background-color: #C9D082;
margin-top: 0px;
border: 1px;
margin: 0 auto;
position: relative;
text-align: center;
}
#header .slogan {
font: 500% Georgia, "Times New Roman", Times, serif;
width:600px;
margin:0;
padding:0;
vertical-align: middle;
text-align: center;
color: #FF0000;
display: inline-block;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
#header .slogan1 {
font: 150% Georgia, "Times New Roman", Times, serif;
width:600px;
margin:auto;
padding:0;
vertical-align: middle;
color: #FF0000;
text-align:center;
text-shadow: 0 1px 0 #454545,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
#header .data {
font: 100% Georgia, "Times New Roman", Times, serif;
color: #F1FC1D;
width:170px;
margin-left:10px;
font-weight: bold;
}
#myNavbar .nav {
border: solid 2px #dfdfdf;
border-radius: 10px;
background: #ffffff;
width: 90%;
display: table;
padding: 10px;
margin: 4px 0 0 0;
font-size: 13px;
border-spacing: 10px;
margin: 30px auto;
}