Center inline-block Div not working

Question

So I'm trying to create a drop down menu with the select and options elements that displays when the device width gets small enough. My problem is I can't center the div that the select element is contained within for some reason (the div id is "navbar2"). It just hugs the left side of the screen. Can anyone see my mistake here?

#navbar2 {
  display:none;
}

@media (max-width:380px) {
  #navbar2 {
      display:inline-block;
      width:80%;
      margin-left:auto;
      margin-right:auto;
      border:1px solid red;
  }

  #navbar2 select {
      width:40%;
  }
}

Answer 1

So I figured this out. Apparently the "auto" trick doesn't work on inline-block elements. So I switched the "display" to "display: block;" and it centered the div horizontally.