Problem with Bootstrap: Content Misaligned with Body

OJTheAviator · April 2, 2018

So I am trying to make a website and I am using HTML, CSS, and Bootstrap. My problem is that the main content part seems to be misaligned with the body, shifted slightly to the right (see second picture). I don't know what is wrong, I've checked my CSS and I haven't used any left padding or margin. Is this just a design element of Bootstrap? Is there a way to shift it back to the left so that the content is centered in the body? Sorry if these are stupid questions, I'm still pretty new to website programming.

Pictures

Spoiler

HTML

Spoiler


<!DOCTYPE html>
<html>
<head>
	<title>This Is A Website | Photos</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet"> 
	<link rel="stylesheet" type="text/css" href="photos.css">
</head>
<body>
	 <header class="container">
	 	<div class="row">
	 		<h2 class="col-sm-4">THIS IS A WEBSITE</h2>
	 		<nav class="col-sm-8 text-right">
	 			<a class="btn btn-primary" href="index.html" role="button">Home</a>
	 			<a class="btn btn-primary" href="thoughts.html" role="button">Thoughts</a>
	 			<a class="btn btn-primary" href="photos.html" role="button">Photos</a>
	 			<a class="btn btn-primary" href="about.html" role="button">About</a>
	 		</nav>
	 	</div>

	 	<section class="jumbotron">
	 		<div class="container">
	 			<div class="row text-center">
	 				<h1>Favorite Photos</h1>
	 			</div>
	 		</div>
	 	</section>
	 	<section class="container">
	 		<div class="row" id="pic_intro">
	 			<p class="col-sm-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat massa sit amet turpis gravida, at semper urna consequat. Donec luctus pulvinar turpis, in ullamcorper nisl sagittis quis. Phasellus tempus finibus est, sed gravida nulla vestibulum sed. Duis pharetra mauris at lobortis condimentum.</p>
	 		</div>
	 		<div class="row">
	 			<figure class="col-sm-6">
	 				<p>A male and female Dark Eyed Junco</p>
	 				<img src="resources/gallery/2Juncos.jpg">
	 			</figure>
	 			<figure class="col-sm-6">
	 				<p>Another pair of Dark Eyed Juncos</p>
	 				<img src="resources/gallery/DarkEyedJunco.jpg">
	 			</figure>
	 		</div>
	 		<div class="row">
	 			<figure class="col-sm-6">
	 				<p>House Sparrow</p>
	 				<img src="resources/gallery/HouseSparrow.jpg">
	 			</figure>
	 			<figure class="col-sm-6">
	 				<p>White Throated Sparrow</p>
	 				<img src="resources/gallery/WhiteThroatedSparrow.jpg">
	 			</figure>
	 		</div>
	 	</section>
	 </header>
</body>
</html>

CSS

Spoiler


body {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 300;
	background-color: rgb(240,240,240);
}

header {
	padding-top: 20px;
	background-color: #fffff4;
	margin-top: 5px;
}

header nav {
	display: flex;
	justify-content: flex-end;
}

header a {
	padding: 0 20px;
	margin: 15px 15px 15px 15px;
}

footer {
	margin-top: 40px;
	margin-left:20px;
	font-size: 10px;
}

section .row img {
	width:100%;
	margin-bottom: 30px;
}

#pic_intro {
	margin-bottom: 20px;
}

.jumbotron {
	display: flex;
	align-items: center;
	background-color: #fffff4;
	background-size: cover;
	color: black;
	border-style: solid;
	height: 200px;
}

.btn.btn-primary {
	color: black;
}

.btn.btn-primary: {
	color: black;
}

.container .btn-primary {
	background-color: #dbdbd5;
	border-radius: 0px;
	border-color:black;
	border-style: hidden;
}

.container .btn-primary:hover {
	background-color: #d2d2cd;
	border-radius: 0px;
}

.container .jumbotron {
	border-radius:0px;

Mira Yurizaki · April 2, 2018

It looks like there's padding on the parent container in the default CSS. It wouldn't be good to override the parent container's CSS, instead it might be better to override the items in question to have smaller margins.