Help with Product Landing page project

HTML-CSS
1

I have been stuck on this project for way too long and it’s making me not code every day.

Issues I need help solving:

  1. How do I get my logo image in front of the text in the nav bar?

  2. How do I get the images in the about section next to the text headings?

  3. How do I get all of the content to be centered on the site? It was for a long time, but I did something that screwed it up and I can’t get it back.

I ran my code through a validator to figure out if there were any small issues but I fixed it all and nothing helped.

Thanks for any help you can offer! I really want to put this one behind me.

2

Is the logo that red pepper?

3

try using position absolute, top and left on the icon. You may or may not need to throw in a z-index as well. As for the embedded style in the <i …> element, i would personally include that style in the css sheet for better readability.

Also, be sure that you are using the correct selectors. Please see:

or better yet:

That should address #1

4

For the second one, position relative , top, left should work. I would also look into the ::before selector.

5

Now concerning the third question, I will leave you with this instead. When stuck on a problem regarding styling, this is what helps me. I go through the style sheet, take a look at each rule, and ask myself these questions:

  1. Do I need this?
  2. Why do I need this? / What purpose does it serve?
  3. Does it affect the parent/child element? How so?

It also helps to do an * { outline: 1px red solid} for troubleshooting. These are just some general tips that may prove to be useful.