la cuestión es que he comenzado hacer un blog, he puesto un menú fijo en la parte superior que debería ocupar todo el ancho de página y se me queda a un centímetro del margen izquierdo, por vueltas que le doy con mis escasos conocimientos al código no encuentro la manera de modificarlo para que ocupe todo el ancho completamente.
la dirección es la siguiente: http://tierrassinfronteras.blogspot.com.es/
y el código que he añadido para poner este menu ha sido el siguiente:
<ul class='menu'>
<li><a href='http://tierrassinfronteras.blogspot.com.es/'>INICIO</a></li>
<li><a>RUTAS</a>
<ul>
<li><a href='http://tierrassinfronteras.blogspot.com.es/2016/04/lubrin-valle-hermoso.html'>LUBRÍN</a></li>
<li><a href='URL'>SENÉS</a></li>
</ul>
</li>
<li><a>RINCONES</a>
<ul>
<li><a href='URL'>RINCÓN 1</a></li>
<li><a href='URL'>RINCÓN 2</a></li>
<li><a href='URL'>RINCÓN 3</a></li>
</ul>
</li>
<li><a href='URL'>CONTACTO</a></li>
<li><a href='URL de la red social'><i class='fa fa-facebook'/></a></li>
<li><a href='URL de la red social'><i class='fa fa-twitter'/></a></li>
<li><a href='URL de la red social'><i class='fa fa-pinterest'/></a></li>
</ul>
</div>
luego el css
*{
margin:0px;
padding:0px;
}
#barra-superior {
margin:auto;
width:100%;
background:#c2c5c8; /*Color de fondo de la barra*/
height:35px; /*Anchura de la barra*/
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
ul, ol {
list-style:none;
}
.menu > li {
float:left;
}
.menu{
margin:0 auto;
width:1050px; /*Ancho del menú dentro de la barra, variaremos este valor hasta conseguir el que buscamos*/
}
.menu li a {
color:#ffffff; /*Color de las letras de las pestañas*/
font:normal bold 17px Arial ; /*Tamaño y tipografía de las pestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad esta línea*/
letter-spacing: 4px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:10px 30px;
display:block;
cursor:pointer;
}
.menu li a:hover {
color: #d9dde0; /*Color de las pestañas al pasar el ratón por encima*/
}
.menu li i{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #adbcdc; /*Color de los iconos sociales*/
font-size: 14px; /*Tamaño de los iconos sociales*/
}
.menu li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #ffffff; /*Color de los iconos sociales al pasar por encima*/
}
.menu li ul {
background-color: #333333; /*Color de fondo de las subpestañas*/
display:none;
position:absolute;
min-width:140px;
}
.menu li:hover > ul {
display:block;
}
