The issue I’m having is that the section where we have the email and the phone number, appear differently when viewed on my 15-inch laptop. I’ve included two pictures to help give you a better idea. How can this issue be solved? Thank you
You’ll probably want to give .flextop and #main-nav the same width, and then center those elements with something like margin: 0 auto;.
Currently, .flextop seems to have a max-width of 80%, so it’s position varies depending on the browser size.
And #main-nav has no set width (its child elements are just centered), so it’s position also varies depending on the browser size; however it varies differently than .flextop, so only sometimes will the two nav line up as you’d like.
Hi Eric, Thanks for writing. I tried it and I’m afraid it didn’t do it. If I choose flex-start it will show to the very right of the page. If I choose justify-content: center; it will be in center which is not desired. I’m talking about the section where it says firstname.lastname@example.org +1 (0) 000 000 000 Try it on your end in CodePen.
Hi Eric, The navigation itself is working fine both on the laptop and on the desktop. It’s the email and phone number section which is displaying differently when viewed on both devices. These have their own flex box container.
yep they are quite tough! don’t get discouraged though - every little bit of experience helps.
Re: your question. I should have been a bit more clear. When I’m referring to navs, I’m referring to both your nav and your .flextop.
Give them both border: 1px solid red; and you’ll see they’re lined up. You’ll have to tinker with the inner contents though - as I mentioned above, the inner contents have styling that’s causing some layout issues.
I kept the old code, but just commented out the stuff that needed to change. As mentioned before, I got rid of flex-basis for .icons and changed .container to space-between. And then there was a minor margin adjustment for the button.