Recipe page Challenge

Hello thilisadiki,

Congrats on completing your first challenge👏

To center the card properly, you might want to use CSS flexbox or grid.

Example using CSS Flexbox:

Add the following code to the body:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

You can thus remove the margin from your style :

.main-card {
    margin: 6rem auto;
}

Helpful links:

CSS Flexbox :

Link1

Link2

CSS grid:

Link1

You might want to have a look at the following as well:

Read about accessibility here

Read about semantics here

Read about headings here

I hope these will be helpful to you 😉

Good luck going forward and happy coding 🙂

Hello, firstly congratulations on the solution and continue improving it (I see that you have already centered the card), but I would like to bring a few more points for you to consider:

Regarding the structuring of the content, that is, the HTML: consider using appropriate titles according to their semantics and not the design they present, as this can be adjusted with CSS. So the first title of the page, for semantic and SEO reasons, could be an <h1> instead of an <h2>. Another important point is the table, consider using <th> instead of <td> for table headers.

Regarding design and layout, I believe you are still working on it, if you have any questions feel free to comment here.