Layout
How do I make make my elements start from where the logo begin:
i tried margin, padding. the problem is when i resize it does not stay the same. I want something like the second photo
5 Replies
Its hard to guess if we do not see your code try to upload a codepen link or so and we can help
ok @marcsq
Your "logo" paragraph doesn't have a fixed position, so there won't be a way to align other elements with it. Since its container has
display: flex
and justify-content: space-around
, it'll be in a different spot based on the width of the viewport.
You could use justify-content: space-between
instead, then padding-inline
to move the children away from the sides. Then just use the same padding-inline
value on main
.
I'd do a little more, though... I'd argue that your logo isn't really a paragraph and isn't really a part of your page navigation. I'd make "logo" a DIV then add that and your <nav>
element as separate children in a <header>
element.
In the following pen, I changed your HTML a little. I didn't change your CSS at all, but I overrode some of it. All my new CSS is at the bottom of the stylesheet: https://codepen.io/VAggrippino/pen/OJdNEqg@VinceAggrippino thank very much
got it