Header Section is not Aligned with rest of the content by using flexbox CSS

Question

Issue 1: I wanted to keep the alignment of `header` section with the Hero Image and `Headings`, `paragraphs`. But now the Logo and Navigation is centered and rest of the content is going out from left and right side. How can I move the logo to more on left side and similarly `nav` section to more on right side? so they are aligned with hero box.
Issue 2: Its about coloring the `links` of `nav` section. On my laptop its still showing the blue default color but on the codepen its showing red (that I set but not shown on my laptop) why is that?
If possible can you please write why the error came up in first place? Where I am wrong so I can avoid this in future. I am using VS code on windows 10 with Chrome browser.
Here is the link to my code.
https://codepen.io/johnnwick/pen/zYpYaqp

Answer 1

This was the most detailed reply thanks a ton of course follow is done.

Answer 2

To solve the 1st problem
You want to move the logo to extreme left and nav to extreme right. Isn't ?
So in the * selector
Set margin: 0; only
Remove auto from there, auto is setting the right and left margin.
This is why it is showing in the center.
if you want to set right and left margin
don't set it to auto.
also if you set .container width: 100%;
your nav will stick to the right side
if you set it to 1300px, it will get align to the car image
/†******************************/
There is no problem with the 2nd problem in my system
It is red, both in Visual Studio and codepen.

Answer 3

Thanks a lot @Nonstop Coding . This solved my problem of alignment.
But in * selector doesn't that margin: 0 auto; apply to whole layout? I mean why that applied only to header section?
Also what would be the best procedure to make all content centered still aligned using flexbox or general CSS?
Thanks once again for detailed reply.

Answer 4

AspirantCoder
Answer is too long I'll answer your question in multiple comments, read them all

Answer 5

Comment No. 01
Good question
I checked your code for that.
(1)....Before answering i'll tell you that if we don't define div tag height and width, it will always automatically adjust itself around its inner elements. I'm going to use this point later in my answer.
And here's my answer.
The margin auto is not applied to your content class and car image because there is no space available to move.
Both your car image and <article> content is taking 1300px combined (Full width) and at the same time flex is there which is trying to maintain the default flex-start value.
Because in your css you have wrote display: flex to <article>.
that's why your margin auto did not worked on them and your <article> and car image did not came to center. Because there is no space available.
Now you can ask a question that i can see some space between <article> content and car image?
Then why margin auto did not work ?
So answer to this question is
(2)...First apply border: 10px solid; to your article selector

Answer 6

Comment No. 02
So that you can see what i'm going to tell.
Technically the space that you are seeing between the <article> and car image. It should not exist in first place. Now recall the first point (1)
I mean there should not be any space left between them as per 1st point.
But you can see space why?
Reason:
There are some hidden stray characters between them.
Yeah! you can't see those hidden characters.
why, are they some ghost? Well, No!😁😁
You must of copied your Lorem ipsum from somewhere. From there you got some hidden characters. Those hidden characters are taking that space. I hoped you have applied border to your article as said above(2).....
As per 1st point your article border should be around you article elements but it is currently showing away from you lorem ipsum. It is happening because of hidden characters between them.
If you don't believe there are hidden characters
Try replacing your lorem ipsum with some characters copied from any pdf file or any wikipedia.

Answer 7

comment No. 03
But i recommend copying it from pdf file. Because there may be a chance that wikipedia can contains those hidden characters.
Then you will see that there is no space left between them.
This is how the article and car image is consumimg all 1300px.

Answer 8

Comment No. 04
Use border: properties to see how border are working, it will help you to understand block elements.
I hope you understood what I said above,
Don't forget to like and *** follow! ***😁😁😁✌️

Answer 9

Comment 05
Now how to center elements using flex.
https://code.sololearn.com/WCeKocKQVggg/?ref=app

Answer 10

Comment 06
By using Basic CSS
https://code.sololearn.com/W7A2LlM40wGk/?ref=app