What did I do wrong?

The one I was working on was called Making a website. It has a picture of a crane and a hook pulling a picture up.

Okay, which of the 434 tutorials under Make a Website are you looking at? I’m not going to go through every one of them searching for code that looks like what you’ve written.

https://getmimo.com/learn/29 that one? does that work?

That link shows me all of them. I still have no idea where to go.

Have you tried adding padding to the #header selector? padding: 0 20px; would do it, and then you can make adjustments until you feel good about it.

You should use CodePen to share code that you need help with. It’s much easier to read that way, and I could just edit your code to fix things if I needed to and then re-share the changed version so that you could compare them.

The courses are just telling you how to do simple code, there are projects on their the one im on is the second project that starts with ‘‘Going back to square one’’ you can skip all of it to find their previews of what the website is supposed to look like once you complete the steps. I.E:

Also adding padding made it worse - made ''My Blog and rhe about and contact ‘’ move all the way up to the top and not away from the edges.

If there is no page or view where you can see the entirety of the code you’re trying to copy, then it is a poor tutorial in my estimation. HTML and CSS depend a lot on context and each element is affected by its siblings, parents, and children. It’s highly predictable, but I can’t explain to you what you’re doing differently without being able to use the dev tools to inspect their source code.

Don’t just tell me, show me. I can’t help you if I can’t see the code. Put it all up on CodePen and post the link here.

fyi I don’t know how to add the about page on the html thing on that so it’s just got the home page and the css page.

Okay, I figured out what happened.

#header {
  background-color: #1abc9c;
  height: 150px;
  line-height: 150px
}

This is where you added the padding, but it’s missing a semicolon after the line-height rule (CSS doesn’t care about whitespace, only brackets, colons, and semicolons). So when you added the padding without fixing the syntax, both rules were broken.

When the code is on CodePen, you don’t have to share it as a Gist. You can just paste the link to the pen itself, which is optimal because you can click on that link and are immediately able to see that the live result is what you wanted, then look up and see how I did it.

Oh my that is awesome thank you, do I need to apply the same thing to the footer? Cause that still remains squished to the sides?

No, because #footer already has padding. You just need to delete the zero, and read this tutorial on padding to understand why.

Deleting the 0 actually made the black panel shorter and the text is now correct

and also when I applied the codes in atom, the turtle image now appears larger and I’ve checked the #img and it still the same?

Ah-hah. I looked through your site with the Chrome developer tools and noticed something else.

There’s no such property as maxwidth. It’s spelled max-width. If you undo what you’ve done to the padding, and fix that property, you will find things looking much better.

I noticed something else, and it’s the reason why the footer appeared to shrink:

You have the footer inside a .post-content tag, probably because you forgot to close a tag somewhere (or, more likely, three tags, since it’s also inside .post and #content when it should be at the same level as #content).

I corrected the max-width. I looked through the code all the lines are finished with a ; and or a </> where they need to have a div line or otherwise. I don’t know :open_mouth:

I just did the pen thing and its fixed did you edit it? :smiley: https://codepen.io/DamnedScholar/pen/zeopmO well on the code pen, not on github it seems.

I didn’t. Here’s what I see when I take the code from your GitHub, enter it in Atom, and run the atom-beautify package:

See how the second post is inside the first post? That’s the issue. You don’t close the first post, so everything after that isn’t handled correctly. You can also click on different tags to see them highlighted by the bracket-matcher package like you see in that image. If you click on <div id="content">, you will notice that there’s no highlight, because it has no match.

Ah okay so when I attempted to add the third post, I didn’t add it in correctly.

Yeah, and since you’re just using div tags, which are inexpressive compared to the newer tags available in HTML5, it’s hard to tell just by looking how many tags there are.

Fortunately, if you ever put these lessons into practice, you aren’t going to be hard-coding blog post tags yourself. Every blog CMS ever will generate those for you, and if you happen to get into designing a blog CMS (or a Wordpress theme, or similar), it will be much easier because you will only have to make one template that the software will fill out and repeat on its own.

That’s exactly my plan, to make a blog-like website for my friends and I to use as we want to stream and we need somewhere to link us all together instead of having us all separate. So far I’ve made a starting site using this method. But I have yet to learn how to make it interactive and allow it to work like a blog.

Second to that, I am trying to add this to my list of skills as it may come in handy if I ever want to get anywhere in the world of creativity. As being stuck in retail is really not fun. I’ve already got an Animation degree under my belt, so I’d like to add coding for both web development and eventually gaming to the list. You know? I really appreciate your help in this, I apologise for the lack of knowledge I posses. I am going to go research some more and look at how this all knits together to try and better understand it. (or in better terms, mess around on atom and keep breaking it :smiley: )