How to put the image mage on the top left side-CodePudding

I'm a complete novice here, I want to put the vault-tec image on the left side aligned with the navigation menu,

 <body>
    <div >
      <nav >
        <img src="/images/vault-tec.png" alt="vault-tec-logo" />
        <div >Home</div>
        <div >About</div>
        <div >Services</div>
      </nav>
    </div>
  </body>

Here's the css input:

`
.container {
    background-color: #35538b;
    height: 300px;
}

.navbar {
    gap: 50px;
    display: flex;
    float: right;
    font-size: 30px;
    font-family: monospace;
    align-items: center;
    color: #eac852;
}
.navbar img {
    width: 300px;
    height: 200px;
    justify-content: flex-start;`

I tried with the flex properties display, align-item...it's not working, I want to know what exactly I'm doing wrong. I attached an image for reference. Thanks

CodePudding user response：

You can use align-self and margin-right to align the image to the top left side, your CSS code should look like this:

.navbar img {
    width: 300px;
    height: 200px;
    align-self: flex-start;
    margin-right: auto;
}

CodePudding user response：

Is that how you want it to be? Did I get right?

body{
  margin:0;
}
.container {
    background-color: #35538b;
    height: 300px;
}

.navbar {
    gap: 50px;
    display: flex;
    float: right;
    font-size: 30px;
    font-family: monospace;
    align-items: center;
    color: #eac852;
}
.navbar .logo {
    padding:15px;
    width: 300px;
    height: 200px;
    display:flex;
    align-items:center;
}
.logo img{
    width:100%;
    height:100%;
}

<div >
      <nav >
      <div >
        <img src="https://images.pexels.com/photos/9604815/pexels-photo-9604815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="vault-tec-logo" /> 
      </div>
        <div >Home</div>
        <div >About</div>
        <div >Services</div>
      </nav>
    </div>

CodePudding user response：

By putting the features of the Flexbox, it is distributed to all its children in the same way. Therefore, if you want to change the position properties of any of them without changing the status of the rest, you can use self-align or make position property for your navbar equal to "relative" and the img position property equal to "absolute" and you can manipulate its position by top bottom left right properities. Or, I suggest that it is better for you to make the icons in a new container and control this container in its place or the location of its children icons in it easier, and you will also be able to control the image more smoothly