Estoy tratando de reducir el ancho de las celdas de mi barra de navegación. Me ha vuelto a ayudar un compañero, @Camilo Vasquez añadiendo las librerías bootstrap y diciéndome como cambiar la fuente. Pero me equivoque de código. Con su ayuda también he conseguido ampliar el texto al ancho de pantalla, pero no consigo reducir el ancho de cada elemento de la lista de la barra de navegación, y aunque cambie el tamaño de fuente, siguen siendo muy anchas y se superponen los elementos de la lista, cuandodeberíann estar en una sola linea. No consigo dar separación entre el logo y los siguientes elementos de la barra. Dejo el código, ahora el bueno, a ver si pueden echarme una mano. Gracias
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>