My home page looks correct when seen on my desktop in FF or IE11. However, in Chrome, the page margins are much too large; also the additional margins for the content are much too large.
The page is www.vintagetextile.com
The main style sheet (home.css):
html {overflow-y:scroll;}
body {max-width:980px;margin: 0 auto; border:0;color:#000;background-color:#fff;
font: 1em/1.2 Verdana, Tahoma, Helvetica, sans-serif;}
#preface{padding:.3em; margin-bottom:1.2em; font-size:1.04em;line-height:1.17}
#format{width:80%;word-spacing:-.1em;margin-left:auto; margin-right:auto;}
#top{margin-top:1em}
img {max-width: 100%;border:none;height: auto !important;}
.images span {display: inline-block;overflow:hidden;text-align:center;}
.images .tall {width:32.4%;max-width:400px; height:auto; vertical-align:top;}
img.tall {width:320px;height:468px;}
#bottomBorder {padding-bottom: 0.5em; border-bottom: #fc6 solid 1em;}
.picleft{border:0;float:left;}
.picright{border:0;float:right;}
.bi{font-weight:bold;}
.updatetop{padding:.3em;margin-top:1em;background-color:#F5EBD6;color:Black;font:bold 1.4em
"Times New Roman",Times,serif;}
#measure{padding:.3em .3em .3em;clear:left;margin-top:1em;background-color:#F5EBD6;color:Black;font:bold 1.4em "Times New Roman",Times,serif;}
h3{display:block;padding:.3em;margin:.4em 0 .6em 0;background-color:#F5EBD6;color:Black;font:1.3em
"Times New Roman",Times,serif;}
a.sr:link{color:#00f;background-color:#F5EBD6;text-decoration:none;font-size:1.1em;}
a.sr:visited{color:#00f;background-color:#F5EBD6;text-decoration:none;font-size:1.1em;}
#updatepub{padding:.3em;margin:1em 0;background-color:#F5EBD6;color:Black;font:bold 1.4em
"Times New Roman",Times,serif;}
.x12{font-size:1em;}
.articlesub{font:1.1em Verdana,Tahoma,Helvetica,sans-serif;}
a.main:link{color:#D2691E;text-decoration:underline;background-color:#fff;}
a.main:visited{color:#8B0000;text-decoration:underline;background-color:#fff;}
a.main:hover{color:red;text-decoration:underline;background-color:#fff;}
h1{display:block;font:bold 1.1em Verdana,Tahoma,Helvetica,sans-serif;color:#666666;
padding:0.2em 12px 0.35em; margin-bottom:0.5em;margin-top:4%;float:right;}
div.cl ul {list-style-type:none;line-height:1.3;}
div.cl{clear:both;margin-top:.4em;}
#s3{font-size:.8em;font-weight:bold;text-align:center;}
#s2{font-size:.72em;text-align:center;}
.book{margin-left:auto;margin-right:auto;}
.book img{border:0;vertical-align:bottom;}
.bookleft{border:0;margin-right:6%;}
.bookright{border:0;margin-left:6%;}
.book1{margin-top:1.8em;}
.book1 img{border:0;vertical-align:bottom;}
.bookleft2{border:0;margin-right:3%;margin-left:9%;}
.bookright2{border:0;margin-left:3%;}
p.largecat a#burn {color:#00f;background-color:#fff;text-decoration:underline}
a.ct:link{color:#00f;text-decoration:none;background-color:#fff;}
a.ct:visited{color:#8B0000;text-decoration:none;background-color:#fff;}
a.ct:hover{color:red;text-decoration:none;background-color:#fff;}
@media only screen and (max-width:1030px) {
body{padding:0 45px}}
@media only screen and (max-width:900px) {
.hide {display:none;}}
@media only screen and (max-width:700px) {
images {text-align:center}
body{padding:0 15px}
.hpic1 { display:none; }
.images .tall {
width:48%;
max-width:400px;
height:auto;
vertical-align:top;
margin:0 4px;}}
@media only screen and (max-width:465px) {
body{padding:0 5px}
.hpic2 { display:none; }
.images .tall {
width: 70%;
max-width:400px;
height:auto;
vertical-align:top;
float:none;}}
One possible culprit for the margin issue in Chrome is
@media only screen and (max-width:1030px) {
body{padding:0 45px}}
Additional margins for content is styled by
#format{width:80%;word-spacing:-.1em;margin-left:auto; margin-right:auto;}
I don’t want to change anything that would affect the appearance in FF and IE11. I hope to find a fix for the Chrome appearance.
Thanks in advance to the CSS experts.