margen izquierdo en cuadro de texto

Hola,

No entiendo por qué (ni sé resolver) en el cuadro superior de mi web www.vivirahora.es los márgenes están bien, pero en los cuadros inferiores el margen izquierdo no existe, lo que queda bastante feo. También me gustaría saber si puedo justificar el texto tanto a izquierda como a derecha, porque me parece que es más elegante que sólo justificado a la izquierda (como en los libros, vamos). Una última cosa es que me gustaría que los cuadros de texto verde, rojo y azul fueran más anchos, dado que sobra espacio en la web a izquierda y derecha en el que sólo se ve el fondo. Y, si no es mucho abusar, me gustaría centrar el menu superior, porque en Firefox aparece justificado a la izquierda, y creo que estaría mejor en el centro.

Muchas Gracias!

Pd. os dejo el contenido del .css:

/*

*/

body {
margin: 0;
padding: 0;
background: #C3C3C3 url(images/img01.gif) repeat-x;
font-family: Andalus, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
}

h1, h2 {
font-weight: normal;
}

p, ol, ul {
margin-top: 0;
line-height: 180%;
}

a {
color: #666666;
}

a:hover {
text-decoration: none;
color: #000000;
}

a img {
border: none;
}

img.left {
float: left;
margin: 0 15px 0 0;
}

img.right {
float: right;
margin: 0 0 0 15px;
}

/* Header */

#header {
height: 130px;
margin: 0 auto;
text-transform: uppercase;
}

#logo {
float: left;
padding: 24px 0 0 20px;
}

#logo h1, #logo p {
margin: 0;
font-weight: bold;
}

#logo h1 {
}

#logo p {
padding-left: 1px;
line-height: normal;
font-size: .85em;
}

#menu {
float: auto;
padding-top: 10px;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;

}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
padding: 31px 20px;
text-decoration: none;
font-size: .99em;
font-weight: bold;
}

#menu a:hover {
text-decoration: underline;
}

#menu .current_page_item a {
background: #C3C3C3 url(images/img02.gif) repeat-x;
}

/* Page */

#page {
width: 960px;
margin: 0 auto;
}

/* Content */

#content {
float: left;
width: 650px;
}

.post {
}

.meta {
margin: 0;
padding: 10px 0 15px 20px;
border-top: 1px solid #F3F3F3;
}

.meta a {
text-decoration: none;
}

.meta a:hover {
text-decoration: underline;
}

.meta .more {
padding-left: 12px;
background: url(images/img09.gif) no-repeat left center;
}

.meta .comments {
padding-left: 15px;
background: url(images/img10.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
float: right;
width: 300px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
margin-bottom: 10px;
padding-bottom: 10px;
background: #FFFFFF url(images/img16.gif) no-repeat left bottom;
}

#sidebar li li {
padding: 5px 20px;
border-bottom: 1px solid #F3F3F3;
}

#sidebar h2 {
height: 53px;
margin: 0;
padding: 15px 0 0 20px;
background: url(images/img15.gif) no-repeat;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
}

/* Green Box */

.greenbox {
background: #FFFFFF url(images/img03.gif) repeat-x;
}

.greenbox .title {
height: 60px;
background: url(images/img04.gif) no-repeat;
}

.greenbox .title h1, .greenbox .title h2 {
height: 35px;
margin: 0;
padding: 15px 0 0 20px;
background: url(images/img05.gif) no-repeat right top;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
}

.greenbox .entry {
padding: 10px 20px 0 20px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.btm { background: url(images/img06.gif) repeat-x left bottom; }
.btm .l { background: url(images/img07.gif) no-repeat left bottom; }
.btm .r { background: url(images/img08.gif) no-repeat right bottom; }

/* Two Columns */

.two-columns {
clear: both;
background: url(images/img11.gif) repeat-y;
border-top: 10px solid #C3C3C3;

}

.two-columns .title {
}

.two-columns .title h2 {
height: 53px;
margin: 0;
padding: 15px 0 0 20px;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
}


.two-columns .blue {

background: url(images/img13.gif) no-repeat;
}

.two-columns .red {


background: url(images/img14.gif) no-repeat;
}


.two-columns .columnA, .two-columns .columnB {
width: 320px;
}

.two-columns .columnA {
float: left;
}

.two-columns .columnB {
float: right;
}

.two-columns .btm {
clear: both;
background: url(images/img12.gif) no-repeat left bottom;
}

/* Footer */

#footer {
clear: both;
padding: 30px 0;
background: #FFFFFF url(images/img02.gif) repeat-x;
text-align: center;
font-size: smaller;
}

hola
esa es la desventaja de utilizar plantillas.....

yo te sugiero, que en vez de que pierdas tiempo modificandola a tu gusto
te crees una apartir de esa, no es dificil, si ya hiciste el curso paso a paso

lo hiciste?????

hola,

Lo que pasa es que ya tengo la página montada, y sólo quiero modificar esas pequeñas cosas, sobre todo el tema del margen izquierdo, y no debe ser muy dificil, no?

; )

.two-columns .columnA {
float: left;
border:1px black solid;
padding-left:5px;
}

.two-columns .columnB {
float: right;
border:1px black solid;
padding-left:5px;
}

ricky escribió:.two-columns .columnA {
float: left;
border:1px black solid;
padding-left:5px;
}

.two-columns .columnB {
float: right;
border:1px black solid;
padding-left:5px;
}

Buenas,

Gracias por tu respuesta. He probado con el 'padding-left:5x', pero no resulta bien, puedes comprobar el resultado en www.vivirahora.es (sólo he puesto esa línea en la columna A).

Se te ocurre otra cosa?

Gracias!

Gracias

No sé cómo pero ya lo he solucionado (más o menos)

Ahora lo que me gustaría es centrar la página en Iexplorer. En Firefox se ve bien, pero en Ie coloca todo a la izquierda, y no sé cómo arreglarlo.

Gracias!