Advanced CSS Grid Platform Problems


#1

The interface for the chapter on Aligning items via Columns is messed up!.
The directions are asking me to alter the .main class but there is not “main” in the CSS. Also the program is filling in the questions as “right” when I haven’t worked on them yet. Also the instructions are asking me to change the .recipe class and there is no .recipe in the code:.see below

.container {
display: grid;
max-width: 900px;
position: relative;
margin: auto;
grid-gap: 10px;
grid-template: repeat(12, 1fr) / repeat(6, 1fr);
justify-content: space-around;
height: 1600px;
}

h1, h2, h3 {
font-family: monospace;
text-align: center;
}

header {
background-color: dodgerblue;
grid-area: 1 / 1 / 3 / 7;
}

nav {
background-color: beige;
grid-area: 3 / 1 / 4 / 7;
}

.left {
background-color: dodgerblue;
grid-area: 4 / 1 / 9 / 5;
}

.right {
background-color: beige;
grid-area: 4 / 5 / 9 / 7;
}

.overlap {
background-color: lightcoral;
grid-area: 6 / 4 / 8 / 6;
z-index: 5;
}

footer {
background-color: dodgerblue;
grid-area: 9 / 1 / 13 / 7;
}

Please advise. I really “want to get back to coding” but can’t proceed with these issues. Any one else having these problems. I tried switching to Chrome but still no good.
Thanks,
Gina


#2

Please post a link to the exercise. Thanks.


#3

https://www.codecademy.com/courses/learn-css-grid/lessons/css-grid-ii/exercises/align-content?action=resume_content_item&course_redirect=learn-css
thanks so much!


#4

It won’t be a class, but a type, namely a <main></main> element.

main {

}

In the HTML, under the <header></header> element, you’ll find,

     <main>
        <div class="recipe a">

#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.