I'm trying to reduce the width of the cells in my navigation bar. I was helped again by a colleague, @Camilo Vasquez adding bootstrap libraries and telling me how to change the source. But I'm wrong with code. With its help I have also managed to extend the text to the width of the screen, but I can not reduce the width of each item in the list of the navigation bar, and even if I change the font size, they are still very wide and the elements of the list, when they should be in a single line. I can not give separation between the logo and the following elements of the bar. I leave the code, now the good one, to see if they can lend me a hand. Thanks
html, body {
height:100%;
margin:0px;
color:#444444;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font:400 16px/1.8 sans-serif;
}
.nav-navbar-nav{
font-size: 8;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position:relative;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
.bgimg-1 {
background-image:url("bg_01.jpg");
height:100%;
}
.bgimg-2 {
background-image:url("bg_02.jpg");
height:100%;
}
.bgimg-3 {
background-image:url("bg_03.jpg");
height:100%;
}
.caption {
position:absolute;
left:10%;
top:48%;
width:80%;
margin:auto;
color:#FFFFFF;
font-size:24px;
text-align:center;
letter-spacing:10px;
background-color:#444444;
}
h2 {
text-transform:uppercase;
font:20px sans-serif;
letter-spacing:4px;
color:#444444;
}
a {
text-decoration:none;
letter-spacing:10px;
}<!DOCTYPE html>
<html lang="es">
<head>
<title>PRINCIPAL</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width">
<!-- SUGERIDO Y AÑADIDO POR EL COMPAÑERO Camilo Vasquez -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="todo.css" type="text/css" rel="stylesheet">
</head>
<body>
<header id="header">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-fire"></span>
MIGUEL ESPESO
</a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Principal</a>
</li>
<li>
<a href="#">Sobre mi</a>
</li>
<li>
<a href="#">Estudios</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">ESTUDIOS</a>
</li>
<li>
<a href="#">APLICACIONES</a>
</li>
<li>
<a href="#">Diseño</a>
</li>
</ul>
</li>
</ul>
<!-- Search -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div class="bgimg-1">
<div class="caption">
<span>DALE AL SCROLL</span>
</div>
</div>
<div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
<h2 style="text-align:center;">BIENVENIDOS A MI SITIO WEB..</h2>
<p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate.
En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que
vaya adquiriendo en el curso. </p>
<div class="bgimg-2">
<div class="caption">
<span>100% HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
<p>Aqui ira mas contenido, segun vayamos progresando en la creacion</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span>DALE AL SCROLL</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
<p>Aqui ira mas contenido, segun vayamos progresando en la creacion</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span>¡DIVERTIDO, EH!</span>
</div>
</div>
</body>
</html>