Espacio en blanco entre barra de navegacion y objeto en el cuerpo

Hyemin · #1 (**permalink**) 30/09/2014, 13:06

Hola como estan?

Estoy probando Bootstrap3 e hice una pagina sencilla, el problema es que entre la barra de navegacion y el carrusel me aparece una linea blanca que quiero quitarle (supongo que es el margen)

Probe ponerle la propiedad padding-bottom a la barra de navegacion en 0px; y la de carrusel en 0px; para padding-top pero sigue ahi.

Tambien me surje el problema de que siempre me queda un scroll ala derecha sin importar el tama;o o resolucion de la pantalla

Alguna idea?

Código HTML:

!DOCTYPE html>
<html>
<head>    
        <title>Titulo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../fa/css/font-awesome.css" rel="stylesheet">
        <script src="../jquery.js"></script>
        <script src="../js/bootstrap.js"></script>  
</head>

<body>
    <!-- Barra de navegacion del sitio -->
        
    <div class="navbar navbar-inverse" style="padding-bottom: 0px;">
            <a class="navbar-brand" href="index.html">titulo</a>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="catalogo.php">opcion1</a></li>
                    <li><a href="contacto.php">opcion2</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown" >opcion3 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">3a</a></li>
                                <li><a href="#">3b</a></li>
                                <li class="divider"></li>
                                <li><a href="#">3c</a></li>
                            </ul>
                    </li>
                </ul>  
    <!-- Formulario de busqueda general en catalogo -->
        <div>               
            <form class ="navbar-form navbar-right" role ="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search catalog">
                </div>
            <button type = "submit" class ="btn btn-default">
            Search
            </button>
            </form>
        </div>
    </div> <!-- Div de fin de barra de navegacion -->
   
                   
<!-- Carrusel con fotos de PROMO -->

<center>
    <div id="myCarousel" class=" carousel"  style="background-color: #000000; padding-top: 0px;" >
        
<!-- Indicadores para el carrusel -->
    <ol class=" carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
<!-- Items del carrusel -->
    <div class="carousel-inner">
        <div class="item active"> 
            <img src="http://www.forosdelweb.com/f53/img/promo/1.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Titulo1s</h1>
                        <p>subtitulo1</p>
                </div>
        </div>
        
        <div class="item">
            <img src="http://www.forosdelweb.com/f53/img/promo/2.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Titulo2 </h1>
                        <p>SUbtitulos2</p>
                </div>
        </div>
                                
        <div class="item">
            <img src="http://www.forosdelweb.com/f53/img/promo/3.jpg" alt="" width="630" height="360">
                <div class="carousel-caption">
                    <h1>Titulo3 </h1>
                        <p>Subtitulo3</p>
                </div>
        </div>
    </div><!-- Fin de lista de items del carrusel -->
<script>