HTML, CSS

Great job so far on your project. I can see you put a lot of time into it. However, it is not showing in the preview: there is no picture and no styling.

Here are a few suggestions for improving. First, every web page needs a title. It can be anything you want, but must be placed in the head of the document. You left it blank. So first add <title>Omelette Recipe</title> to the head. Also, the style sheet isn't connected to the html. In the head use <link rel="stylesheet" href="./style.css" />

Next, your picture isn't showing because the path to the picture is incorrect. Change the img to src="./image-omelette.jpeg"

There is a better way to center your content in the middle. Don't use margin: 300px; border: 300px; Instead give the main a width and use one of the techniques in this article. So, for example,

body {
  background-color: hwb(332 16% 52%);
  /* color: hwb(332 16% 52%); */
  display: grid;
  place-content: center;
}

main {
  background-color: hsl(0, 0%, 100%);
  background-position: center;
  /* margin: 300px; */
  padding: 25px;
  /* border: 300px; */
  width: 650px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

img {
  /* padding: 40px;
  border: 23; */
  margin: 0 auto;
}

The card is centered in the body with display: grid; place-content: center;

The content in the card is centered using flexbox

The img is centered using margin: 0 auto;

Hope this helps.