Chrome presentation not working right

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.

The home page has a max-width of 980px. All other pages have a percentage width around 90%. Try changing one or other to bring them into line. :slight_smile:

Allan:
This is the style sheet for only one page, the home page. There are no other pages using this style sheet.

The point still stands: you have a max width set on the body element that is causing the issue.

When I commented out “max-width:980px;”, the page looks the same in FF. However, in Chrome, there is no left margin at all; in IE there are no margins. I suppose that “max-width:980px;” is necessary to make the design work in Chrome and IE11 and I will have to live with the look in Chrome.
Thanks to the commenters for their ideas.

No, Chrome works the same way the other browsers do. You’ll need to replace the max-width with something, like width: 80%.

It’s not a good idea to use a completely different style sheet for the home page. Use your main site style sheet, and if there are some special styles for the home page, just target the special elements with a class or ID etc.

Thanks to all the posters for the tips.