I need to set the default width of the nav of my page to some smaller value.
I think is better to give you some context:
I'm a Data Analyst using R. I had a normal web page (basic html and css), but now I'm trying out creating a webpage with RMarkdown.
Problem:
The thing is that Rmarkdown produces an HTML with a fixed width, that I cannot reproduce using plain CSS.
I've "attacked" in many forms the "nav" class of my navbar without success.
This is the URL used to call the bootstrap library (3.3.5):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">Right now, this is my only code in the CSS file. May you guide me on finding the solution?
body {
max-width: 940px;
margin-top: 52px;
margin-left: 34px;
margin-right: 84px;
}This is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>omargonzalesdiaz - data science</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/estilos.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WNFRFK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WNFRFK');</script>
<!-- End Google Tag Manager -->
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead top50">
<h2 class="text-muted">omar gonzáles díaz</h2>
<p class="text-muted">Data Analyst and R Programmer</p>
</br>
<nav>
<ul class="nav nav-justified">
<li class="active"><a href="index.html">Inicio</a></li>
<li><a href="projectos.html">Projectos</a></li>
<li><a href="blog.html">¡Blog!</a></li>
<li><a href="js-ejercicios.html">Javascript</a></li>
<li><a href="sobre-mi.html">Sobre mí</a></li>
</ul>
</nav>
</div>
</br>
</br>
</br>
<!-- Jumbotron -->
<div class="main row top50">
<!--SIEMPRE TRABAJAR LA COL NORMAL Y LA COL PUSH -->
<aside class="col-md-4 col-md-push-8 top20">
<a id="yo" href="index.html"><img src="images/yo.png" class="center-block image_on"><img src="images/yo-bn.png" class="center-block image_off"></a>
<div class="text-center top10">
<a href="https://pe.linkedin.com/in/omargonzales"><img src="images/linkedin.png" alt="linkedin" class="img-responsive center-block align-inline size15"></a>
<a href="https://github.com/OmarGonD"><img src="images/Github.png" class="img-responsive center-block align-inline size15"></a>
<a href="https://twitter.com/o_gonzales"><img src="images/twitter.png" class="img-responsive center-block align-inline size15"></a>
<a href="mailto:oma.gonzales@gmail.com"><img src="images/gmail.png" class="img-responsive center-block align-inline size15"></a>
</div>
</br>
<p class="text-center">Movistar: 98-800-8026</p>
<p class="text-center text-muted">Lima - Perú</p>
</aside>
<!--SIEMPRE TRABAJAR LA COL NORMAL Y LA COL PULL -->
<article class="col-md-8 col-md-pull-4 text-justify">
<p>Este es el sitio de Omar Gonzáles Díaz. Soy un egresado
de la facultad de <a href="http://udep.edu.pe/comunicacion/">
Comunicación de la Universidad de Piura</a>,
con especialización en Marketing. Además, realicé un
<a href="http://marketingdigital.pe/">Diplomado en Marketing
Digital</a> en la misma casa de Estudios (2013).</p>
<p>Me interesa el mundo del <a href="https://es.wikipedia.org/wiki/An%C3%A1lisis_de_datos">
Análisis de Datos</a>. Gracias a Dios,
tuve la oportunidad de analizar las campañas de marketing
digital de importantes empresas peruanas (Ecommerce sites y otros clientes).</p>
<p>Este sitio intenta recoger todo lo aprendido, y lo que
queda por aprender, sobre el análisis de datos, especialmente
el manejo de datos en R.</p>
<p>Debido a que la poca información disponible
en español, aquí encontrarán mis propias experiencias con "R y
el análisis de datos"; así como material recolectado de la web.</p>
</br>
<h2>Recursos profesionales:</h2>
<ul>
<li>Mi Hoja de Vida:</li></br>
<!--<a href="cve.html">Mi Hoja de Vida - Español (html)</a>-->
<div class="align-inline">
<form action ="assets/OMAR ANDRÉ GONZÁLES DÍAZ - Esp.pdf" method="get">
<button id="spanish" type="submit" class="download right20 btn btn-primary">PDF Español</button>
</form>
</div>
<div class="align-inline">
<form action ="assets/OMAR ANDRÉ GONZÁLES DÍAZ - Eng.pdf" method="get">
<button id="english" type="submit" class="download left20 btn btn-primary">PDF English</button>
</form>
</div>
</br>
</ul>
</article>
</div>
<!-- Example row of columns -->
<div class="row top20">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 color1 text-justify">
<h3>Blog!</h3>
<p>Todos los artículos estarán publicados aquí:</p>
<p></p>
<p><a class="btn text-center" href="blog.html" role="button">Visitar el Blog! »</a></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 color1 text-justify">
<h3>Data Science: </h3>
<p>En esta sección encontrarán otros blogs que visitó, principalmente, sobre temas de analítica y visualización de datos</p>
<p>Además, encontrarán artículos diversos, entrevistas a otros analistas, etc.</p>
<p><a class="btn text-center" href="#" role="button">Visitar el Blog! »</a></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 color1 text-justify">
<h3>Javascript</h3>
<p>Aquí encontrarán todos los ejercicios resueltos de Javascript.</p>
<p>Me considero bastante autodidacta. Basta googlear algo para empezar a aprender. </p>
<p><a class="btn text-center" href="js-ejercicios.html" role="button">JS - Ejericicios »</a></p>
</div>
</div>
<!-- Site footer -->
<footer class="bottom20">
<hr>
<div>© <a href="index.html">omar gonzales diaz</a>
2015
</div>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery/jquery.matchHeight.js" type="text/javascript"></script>
<script>
$(function() {
$('.color1').matchHeight();
});
</script>
</body>
</html>I've searched for this topic, and this is the closest case I've found.
How to change navbar/container width? Bootstrap 3
According to that question the default width is 1170px, I would like to set it to 940px, and from there play with the number until the a) normal html page and b) the html generated with rmardown are the same width.
Also I don't understand the @media part...
See images:
HTML (NORMAL): The gap at the right part is smaller (next to "Sobre mí" section), I need this to be the same width as the Rmarkdown HTML page:
HTML (RMARKDOWN):
UPDATE 1:
After first answer, I tought this could be related to the padding of each element so I inserted:
.nav>li>a {
padding: 10px 10px;
}but not change occured.
This is the element: "Sobre mì" inspected:
