Extraño espacio a la izquierda de navbar collapse -- bootstrap

[RAZGRIZ24]

Buenas compañeros, estoy a vueltas con bootstrap, he buscado la solución en Stackoverflow pero no encuentro lo que busco.

A la izquierda de mis botones aparece un extraño hueco que no soy capaz de eliminar ni "cancelando" los valores de padding y margin de bootstrap mediante !important.

Aquí os dejo una imagen:



La flecha indica lo que os digo. A parte del código normal de bootstrap, aquí os dejo el mío:

Código HTML:

<div class="bottom-nav-wrapper">
                <div class="navbar-header navbar-inverse">
                       <!-- collapse menu-->
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                               <span class="sr-only ">Toggle navigation
                                </span>
                                <span class="icon-bar">
                                </span>
                                <span class="icon-bar">
                                </span>
                                <span class="icon-bar">
                                </span>
                            </button>
                    </div>
                            <!--Navs-->
                   <div class="collapse navbar-collapse">
                        <ul class="comodin-ul">
                            <a class="main-nav" href="eventos/index.html">
                                <li>Inicio</li>
                            </a>
                            <a class="main-nav" href="eventos/index.html">
                                <li>Soluciones Comodín</li>
                            </a>
                            <a class="main-nav" href="eventos/index.html">
                                <li>Tarifas</li>
                            </a>
                            <a class="main-nav" href="eventos/index.html">
                                <li>Contacto</li>
                            </a>
                        </ul>
                    </div> 
            </div>
        </div> 

Y mi CSS:

Código CSS:

.bottom-nav-wrapper{
    width: 100%;
    height: 6vh;
    background-color: #348aff;
    float: left;
}
.comodin-ul {
    display: block;
    width: 100%;
    margin: auto;
    list-style-type: none;
    border-bottom: 1px solid green;
}
a.main-nav{
    border:1px solid red;
    display: block;
    width: 25%;
    float: left;
    text-align: center;
    height: 6vh;
    font-size: 2vh;
    padding-top: 3vh;
    line-height: 0;
    color:#FFF;
}
a.main-nav:hover{
    cursor: pointer;
    color: #333;
    background-color: white;
}
@media (max-width: 750px) {
    .comodin-ul{
        width: 100%;
    }
    a.main-nav{
        float: none;
        width: 100%;
    }
    .collapse, .navbar-collapse{
        background-color: #f7f7f7;
    }
}
/*Bootstrap modifications*/
.navbar-inverse{
    background-color: #348aff;
}
.navbar-toggle{
    border: none;
    background-color: #348aff;
    color: white;
    padding-top: 2.2vh;
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #DEDEDE;
}
/*Aquí podéis ver lo que digo, he tratado de eliminar los paddings, pero no funcionó, ya he eliminado esa instrucción.*/
.navbar-collapse {
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
}
 

Sospecho que tiene que ver con no haber añadido el logo vía bootstrap (navbar-brand), pero la verdad es que no lo sé.

Alguno de vosotros se ha encontrado algún problema similar alguna vez?

Muchas gracias chicos,

Mariano.