Hello everyone,
I created this navigation menu using flexbox https://codepen.io/Learner79/pen/poymyjv
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 
I’m not sure if this has to do with media queries.
never mind, I am deleting this, that did not work the way I thought it would.
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 support@mywebsite.net +1 (0) 000 000 000 Try it on your end in CodePen.
Flex is good for positioning elements inside of a container, although I’m not sure I’d recommend it for your outer containers that need to align.
As I mentioned above, give both navs the same width and center them: let’s say width: 80%; margin: 0 auto;. And then just make sure the contents sit against the right side of the navs.
Here’s an example: https://codepen.io/eb23/pen/NWNQqYm
On by 24-ich monitor it looks fine but not on my 15-inch laptop. I tried it but it’s still the same.
the nav are lined up. if you want, you can add a temporary red border around them to see.
It’s the stuff inside that’s causing the problems.
One quick fix is to get rid of flex-basis for .icons, and change some of your justify-content inside your #main-nav to space-between so it stretches to the end of the nav.
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.
I guess that’s why some prefer drag and drop editors. HTML and CSS are beautiful to learn but quite tough. 
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.
Hi Eric, Thanks I won’t get discouraged, it’s both challenging and fun.
Having added a border to both, I still can’t see where the issue lies.
Here’s a codepen that has resolved the issues: https://codepen.io/eb23/pen/bGpXqma
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.
Hope this helps!
Thanks, Eric. That does it. I’ll study the code, compare to mine, and let you know what I plan to do next. This is the most challenging part of building a page using HTML/CSS.
Eric, many thanks again for showing me how it works. I think I understood it very well.
Hi Eric, I create this ‘simple’ footer using flexbox and would like to know if I’ve done it correctly. I’m thinking, should I be using the
