How can I center my dropdown menu?

Question

Hello. I am attending the first month of a technical course and I am working to create a site using HTML5 and CSS3 techniques that we learn in class and innovations would be welcome. I searched a lot about dropdown menus and a person on facebook helped me apply the dropdown on my site, but the menu is all aligned to the left and I tried to rewrite and edit as much as possible, but there was no success. How can I be solving?

Here is the project http://codepen.io/w1l14n/pen/dprrVa (sorry but as the user tried to add the dropdown in a ready menu, it resulted in this kk)

Thanks in advance!

Answer 1

This is easily solved using display: flex in your class menu, for example;

.menu {
  display: flex;
  -webkit-display: flex;
  -moz-display: flex;
  -o-display: flex;
  align-content: center;
  justify-content: center;
}

What matters most to you is display: flex, the lines where they are written -moz-, -o- e -webkit- serve to make sure that this will work in all browsers.

Here are some links to help you learn flexbox.

Css Trick

Awesome BR, this link contains content for various subjects, including css, note that within the CSS category you can also find a super cool game to help in learning flexbox. Flexbox Froggy