Menu dropdown bootstrap

I think the problem was opening / closing errors of some html tags:

Correction:

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand"><img src="images/logo.png" class="img-responsive" alt="logo"></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul id="menu-header" class="nav navbar-nav navbar-right">
                <li>
                    <a href="index.html" class="smoothScroll">PÁGINA PRINCIPAL</a>
                </li>
                <li>
                    <a href="servicos.html" data-toggle="dropdown" class="dropdown-toggle">SERVIÇOS <span class="caret"></span></a>
                    <ul role="menu" class="dropdown-menu">
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="manuntencao.html"><i class="fa fa-cogs" aria-hidden="true"></i> Manuntenção de websites</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="web.html"><i class="fa fa-code" aria-hidden="true"></i> Desenvolvimento Web</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="redessociais.html"><i class="fa fa-level-up" aria-hidden="true"></i>&nbsp&nbspRedes Sociais</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="cursos.html"><i class="fa fa-book" aria-hidden="true"></i> &nbspCursos</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="seo.html"><i class="fa fa-search" aria-hidden="true"></i> &nbsp&nbspSEO</a>
                        </li>
                        <li id="menu-item-191" class="menu-item-191">
                            <a style="text-align:justify;" href="suporte.html"><i class="fa fa-support" aria-hidden="true"></i> &nbsp&nbspSuporte</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="contacto.html" class="smoothScroll">CONTACTO</a>
                </li>
                <li>
                    <a href="#" class="smoothScroll">ENSINO</a>
                </li>
            </ul>
        </div>
    </div>
</div>

A your bar in jsfiddle

It may also be derived from some css that you are defining, however here is the html part corrected

I can not comment. but I'll try to help: Understand P-X as OCCUPIED SPACE Understand M-Y as VACANCY SPACE AROUND.

<ul role="menu" class="dropdown-menu p-X m-Y">
  <li class="menu-item dropdown p-X m-Y">
    <a href="" class="p-X m-Y">
      <i class="fa fa-level-up p-X m-Y"></i>
    </a>
  <li>
</ul>

P - is the distance between paragraphs VALUES FOR PX: p-0, p-1, p-2, p-3, p-4 , p-5, p-6
M - IS THE DISTANCE BETWEEN MARGIN AND FATHER ELEMENT
Values for MY: m-auto, m-0, m- m-3, m-4, m-5
test the values in each item. and tell me if it worked.