I’ve spent 2 days trying to figure out what I’ve done wrong. I can’t seem to find the fresh eyes I need to see the problem.
I don’t know if the problem is basic, ie that I don’t understand the grid functions to control formatting, or if I have an error in the code or a typo that I can’t see. I’ve passed both the CSS code and the HTML code through validators without finding the error; so I’m thinking that I misunderstand how to use grids.
If anyone can help identify the problem, I’d be very grateful.
Below the synopsis of the situation is a screenshot showing what VS Code Live Server displays with the Chrome browser and below that are the CSS and HTML code.
Synopsis:
File is home.html and has the required html file elements; file contains 8 <div>s
First <div> is .page-background; displays correctly
Second <div> is .page-heading; displays correctly
Third <div> is .home-page; sets display as grid for other included <div>s
Fourth <div> is .main-menu; displays correctly
Fifth <div> is .parents-photo-heading; displays correctly
Sixth <div> is .parents-photo; DOES NOT DISPLAY CORRECTLY
Seventh <div> is .family-photo-heading; displays correctly
Eighth <div> is .family-photo; DOES NOT DISPLAY CORRECTLY
Instead of displaying within the confines of the .page-background which contains the grid defining .home-page, both photos display below the .page-background area AND 2 borders are displayed for each photo instead of the single border defined for each AND borders are not congruent, appearing one set higher than the other on the screen.
As far as I can tell, there are no breaks that would force the photos to new lines.
The HTML passes through an online validator without errors.
CSS Code:
.page-background
{
background-color: rgb(234, 217, 201);
width: 1060px;
height: 555px;
margin-left: auto;
margin-right: auto;
border-style: ridge;
border-width: 6px;
border-radius: 20px;
font-family: birthstone;
}
.page-heading
{
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: birthstone;
font-size: 50px;
}
.no-bullets
{
list-style-type: none;
margin: 0;
padding: 0;
}
.home-page
{
display: grid;
margin-left: auto;
margin-right: auto;
font-family: birthstone;
font-size: 40px;
text-align: center;
}
.main-menu /* attributes for grid box 1 */
{
grid-row: 1;
grid-column: 1;
display: block;
width: 150px;
height: 345px;
font-family: birthstone;
font-size: 20px;
line-height: 1.6;
margin-top: 50px;
margin-left: 35px;
margin-right: 40px;
border-width: 5px;
border-style: ridge;
border-radius: 5px;
padding-top: 12px;
padding-left: 12px;
text-align: left;
}
.parents-photo-heading
{
grid-row: 1;
grid-column: 2;
width: 254px;
height: 25px;
margin-top: 45px;
}
.parents-photo /* attributes for grid box 2 */
{
grid-row: 2;
grid-column: 2;
width: 254px;
height: 254px;
margin-top: 70px;
margin-right: 30px;
border-width: 5px;
border-style: ridge;
border-radius: 5px;
object-fit: contain;
}
.family-photo-heading
{
grid-row: 1;
grid-column: 3;
width: 642px;
height: 25px;
margin-top: 45px;
}
.family-photo /* attributes for grid box 3 */
{
grid-row: 2;
grid-column: 3;
width: 500px;
height: 254px;
margin-top: 70px;
border-width: 5px;
border-style: ridge;
border-radius: 5px;
object-fit: contain;
}
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css"
rel="stylesheet" href="CSS/clan2.css" media="screen">
<!-- MAY 2025 -->
<title>Main Menu/Home</title>
</head>
<body>
<!-- Main Menu/Home Page main-menu -->
<div class="page-background">
<div class="page-heading">The Hutchins Clan</div>
<div class="home-page"> <!-- Defined as "display: grid" -->
<div class="main-menu"> <!-- grid box 1; row 1 column 1 -->
<ul class="no-bullets">
<li>
<a href="home">Home</a><br>
<a href="Phyllis'Album.html">Phyllis' Album</a><br>
<a href="personal-pages.html">Personal Pages</a><br>
<a href="hutchins-line.html">Hutchins Surname Line</a> <br>
<a href="baker-line.html">Baker Surname Line</a> <br>
<a href="histories.html">Histories</a> <br>
<a href="anecdotes.html">Anecdotes</a> <br>
<a href="submissions.html">Submissions</a> <br>
<a href="search.html">Search</a> <br>
<a href="help.html">Help</a> <br>
</li>
</ul>
</div> <!-- END of .main-menu -->
<div class="parents-photo-heading">Healy and Pa</div> <!-- grid box 2; row 1 column 2 -->
<div class="parents-photo">
<img src="images/healy-and-pa-ca-1956.jpg" alt="Healy and Pa" class="parents-photo">
</div> <!-- grid box 4; row 2 column 2 -->
<div class="family-photo-heading">The Entire Clan</div> <!-- grid box 3; row 1 column 3 -->
<div class="family-photo"> <!-- grid box 5; row 2 column 3 -->
<img src="images/the-clan-in-color-cropped-with-blur.png" alt="the clan" class="family-photo">
</div>
</div> <!-- END of .home-page -->
</div> <!-- END of .page-background -->
</body>