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.

[KATHYU]

Sorry no pude leer todo el código, estoy ocupada pero se me viene una idea.

Si todo ese código esta dentro de un div container creería que eso le genera ese espacio.
Ya intento poner todo el menu en un div fluid ?? esto le permitiría abarcar toda la pantalla del navegador con su menu