Margin-right: auto not working in flexbox

Question

I've been trying to get my logo on the left side and some nav buttons on the right side, but the logo just refuses to budge.

 <div class="flex-container">
    <div><img onclick="location.href='index.html'" src="arvax_logo.png" class = "logo"/></div>
    <div><input type="button" onclick="location.href='about.html';" value="About" /></div>
    <div><input type="button" onclick="location.href='faq.html';" value="FAQ" /></div>
    <div><input type="button" onclick="location.href='resources.html';" value="Resources" /></div>
  </div>

.flex-container {
  display: flex;
  align-items: unset;
  width: 100%;
  justify-content: flex-end;
}

.logo{
  height: 60.5px;
  width: 272px;
  justify-self: flex-start;
  margin-right: auto;
}

I read here that this was the way to do it, but I keep getting:

try adding flex-grow: 1; in .logo css – Dr Manish Lataa-Manohar Joshi Apr 19 '21 at 22:43 — Dr Manish Lataa-Manohar Joshi, Apr 19 '21 at 22:43

score 0 · Answer 1 · answered Apr 19 '21 at 22:55

You need to assign the logo class to the parent div of the image, which is on the same level as the div elements which contain the input elements (i.e. all these being the flex items, as direct children of the flex container), not to the image itself. Or add another class to that div and set up a CSS rule for that one containing margin-right: auto

score 0 · Accepted Answer · answered Apr 19 '21 at 23:25

This should do it for you. Split the image and menu into their own groups and then use justify-content: space-between to put them on opposite sides.

<div class="flex-container">
    <img onclick="location.href='index.html'" src="arvax_logo.png" class = "logo"/>
    <div>
        <input type="button" onclick="location.href='about.html';" value="About" />
        <input type="button" onclick="location.href='faq.html';" value="FAQ" /></div>
        <input type="button" onclick="location.href='resources.html';" value="Resources" />
    </div>
 </div>

.flex-container {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.logo{
  height: 60.5px;
  width: 272px;
}

Margin-right: auto not working in flexbox

2 Answers2