HTML and CSS how to move my logo to the left-CodePudding

I want my logo to be at the left side or to use flex-start, but it doesnt move at all?

here's a screenshot the html and css are here

header img {
  height:65px;
  display: flex;
  justify-content: flex-start;
}

CodePudding user response：

You are declaring the header img as the flex-Container. Which means that all of the content in header img will be at the beginning of header img.

header img is inside of header, which itself is a flex-Container that tells all of its children to be justify-content: flex-end;.

As a child of header, header img will obey the rules of its parent.

If you want header img to be on the left and the rest on the right, you could wrap all of the header children you want to be on the right side in another div and set justify-content of the header to justify-content: space-between;.

That way, all of the direct children of header will be pushed apart as far as possible, since now it only has two children: header img and the newly created div containing everything else. If you now want the contents of the second child to be in a row, you simply give the div a class of display: flex;. You don't need to specific row, as that's the default flex-direction.

Here is an example: Codepen Example

div.parent {
    display: flex;
    justify-content: space-between;
}

div.child-2 {
    display: flex;
}

CodePudding user response：

header .github {
    margin-right: auto;
}

CodePudding user response：

Something like this should do the trick:

header .github {
  margin: 0 auto 0 0;
}