I'm a student working on a responsive header layout using flexbox, and I'm encountering an issue. When I try to move the logo to the left by a few pixels using 'margin-right', it also affects the positioning of the other elements. I want the navigation elements and the other link to remain in their positions.
Please ignore the borders, as they are there for my understanding.
* { border: 1px solid black; box-sizing: border-box;}header { display: flex; padding: 20px 0; font-family: sans-serif; justify-content: space-around;}.logo { color: rgb(31, 31, 58); margin-right: 20px;}<body><header><div class="logo">Logo</div><nav><a href="#">Home</a><a href="#">About</a><a href="#">Portfolio</a><a href="#">Contact</a></nav><div class="Download"><a href="#">Download</a></div></header></body>I tried moving the logo to the left using the 'margin-right' property and also tried 'padding-right'. In both cases, the logo moves to the left, but the other elements also shift from their positions.
I know I can use the 'position: relative' property, but I believe it's not the best approach for a responsive website.
