Lining things up?

1

Hi, everyone!

I appreciate all of the support I’ve gotten on these forums for past projects. I’ve run into a couple problems with the portfolio project. I have been google searching and experimenting for a couple days and still can’t figure it out. Here is what I have so far:

https://codepen.io/matt-schucker/pen/xxwjOJE?editors=1100

Two main issues:

  1. What does the nav bar (salmon like color) not go the same width as the welcome section? They are both set to 100%, which I understand is 100% of the parent element but I can’t seem to figure out why the 100% for the nav bar is different.

  2. I’m having trouble getting the p below the h1 to be closer together in the welcome section. I put absolute position on p and then use bottom % until I got it where I wanted, but it renders differently on codepen and VS Code so I’m thinking that’s not the proper way to do it.

You guys are the best. I hope I have enough know-how to help others on here some day
thanks!
~Matt

2

Greetings @crunchy409,

  1. You need to remove the width and the margin from the nav links:
.nav-links {
  color: #84ffe6;
  background-color: #ff9b84;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
}
  1. Don’t use position: absolute on the elements, it will do more harm than good. Instead, go with:
.welcome-section p {
  font-family: 'Jura', sans-serif;
  font-size: 2.5rem;
  margin-top: -30px;
}

Hope this helps :+1:

1 Like
3

That is perfect!! Thank you, Queryeleison!

Just for my own benefit, is there a specific reason why putting width: 100% for the nav-links makes it larger than the 100% on my first section?

4

Hey @crunchy409,

If you give the element a 100% width it will be as wide as its container (in this case, the document’s body), so it should get full-width.

If you add a margin to that element, it will be full-width + the margin, and it will go outside of the viewport.

Hope this makes sense… :roll_eyes:

1 Like
5

yeah, I think I understand that. thanks again!