How to move image to the left in portfolio? float doesnt work

How to move image to the left in portfolio? float doesnt work
0.0 0

#1

I’m trying to move my image to the left in my navigation bar, but using “float:left” doesn’t work. I have to use margin-right for it to move to the right, but doing it this way I dont’t know if its going slightly off the div or not. I will greatly appreciate any help. here is a link to my project and my css https://codepen.io/icewizard/pen/owzJyg

.flex-container{
display: flex;
height: 50px;
width: px;
justify-content:flex-end;
background-color:lightgrey;

}
#plus1{
margin-right:px;
width:50px;
border-radius:50%;
}
.flex-item{
background-color:lightgray;
height:50px;
width:100px;
margin:auto;
display:block;
line-height:50px;
text-align:center;
font-family: “Times New Roman”, Times, serif;
}
a{
text-decoration:none;
color:#373735 ;
}
.flex-item:hover{
background:#6f7166;
color:purple;
}


#2

what did you mean by this ‘to the right’? smth like this?


#3

Just reorder HTML

<body>
<div class="flex-container"> 
  
 <a class="bang" href=#> <div class="flex-item item1"> About
    
   </div></a>
   <a class="bang2" href=#> <div class="flex-item item2"> portfolio
     
     </div></a>
 <a class="bang3" href=#> <div class="flex-item item3"> Contact
   </div></a>
   <img id="plus1" src="https://s-media-cache-ak0.pinimg.com/736x/26/04/a4/2604a424ac20c99c920aec0fbbcb48cd.jpg" alt="plus">
</div>
  <div id="second"> </div>
  </div>
  <div id="third"> </div>
<div id="main"> </div>
</body>

#4

my bad, I meant I want to move my image to the left near the border of my navigation bar. I can do that using margin-right, but I don’t know ifits going over my navigation bar that way or if its directly at the end of the bar. Is there any way I can do this? Float:left; isn’t working


#5

I made a mistake, meant to say how to move it to the left. I can use margin-left but I want my image directly on the end of the border of my navigation bar, but if I do it with margin-left I don’t know if its going off of the navigation bar or not. Float:left isnt working. Is there any other way I can do this?


#6

Try with this link : https://css-tricks.com/snippets/css/a-guide-to-flexbox/


#7

ok i see , u use display flex there , im not a pro at it … yet hehe , so heres everything abt it https://css-tricks.com/snippets/css/a-guide-to-flexbox/ i’m sure you will find the answer there) or check this https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_margin w3schools demo, guess thats what you need