What did I do wrong?

Made a video to explain all please watch and I hope you can. Help Needed :frowning:

Please, please, write out what you need on the forum instead of live in Notepad during the video. It’s very hard to read.

In index.html, you use <ul id="header-nav">. In About.html, you use <ul>. That’s the difference I can see.

Sorry I just can’t post so many things in as a new user, I will next time. I have done this and it seems I was missing some lines of code in my about page and it’s all okay now. Thanks :slight_smile:

The one thing I am finding hard to work out is that my titles are now squished to the left or right and on Mimo’s demonstration they are positioned nicely so they are not hugging the edge of the screen. Do you know why this is or where I need to add in a margin or padding or something?

My objection was to you writing the question in Notepad in the video, and that’s partially because you were writing in Notepad. You aren’t restricted from posting text as a new user, just images and links.

You keep referring to the Mimo tutorial without telling me where to find it. I don’t know Mimo and I don’t know what tutorial you’re following, but if you give me a URL, I can take a look for myself to see what you’re doing differently.

I wasn’t refering to the text, I was refering to adding images as I would have needed to add at least 4 images and it won’t let me.

Mimi is a paid for tutorial service that teaches most things around coding. So I don’t know what you will be able to see unless you subscribe. It’s an app and you can access it on the web. https://getmimo.com

Thanks.

Apparently Mimo offers a free trial, so I have access to the tutorials. Which one are you looking at?

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).