Bootstrap - uporządkowanie wiedzy

pytanie zadane 3 stycznia 2019 w HTML i CSS przez mb-dir Mądrala (6,710 p.)

Witam

Otóż zaczynam dopiero zabawę z Bootstrapem, przepracowałem i przeanalizowałem odcinek 0 i 1 u Pana Zelenta, poczytałem trochę z innych źródeł, widzę co wnosi stosowanie Bootstrapa. W celu poukładania tego w głowie stworzyłem od podstaw galerię jak z odcinka 5 CSS(kod pisany przeze mnie od podstaw, kolorystyka, obrazki takie jak w odcinku). Wyszło mi coś takiego:

<!DOCTYPE HTML>
<html lang="pl">
<head>

	<title>Galeria</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
	<link rel="stylesheet" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" href="main.css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin-ext" rel="stylesheet">
</head>


<body>

<main>
	<div class="container">

		<article class="content">
			<header>
				<h1>Piękne miejsca na ziemi</h1>
			</header>
				<div class="row no-gutters">
					<div class="col-sm-12 col-lg-6">
						<figure>
							<img src="img/01.jpg" alt="Piękne miejsce na Ziemi :)">
							<figcaption>Świątynia cała ta</figcaption>
						</figure>
					</div>

					<div class="col-sm-12 col-lg-6">
						<figure>
							<img src="img/02.jpg" alt="Piękne miejsce na Ziemi :)">
							<figcaption>Świątynia cała ta</figcaption>
						</figure>
					</div>

					<div class="col-sm-12 col-lg-6">
						<figure>
							<img src="img/03.jpg" alt="Piękne miejsce na Ziemi :)">
							<figcaption>Świątynia cała ta</figcaption>
						</figure>
					</div>

					<div class="col-sm-12 col-lg-6">
						<figure>
							<img src="img/04.jpg" alt="Piękne miejsce na Ziemi :)">
							<figcaption>Świątynia cała ta</figcaption>
						</figure>
					</div>

					<div class="col-sm-12 col-lg-6">
						<figure>
							<img src="img/05.jpg" alt="Piękne miejsce na Ziemi :)">
							<figcaption>Świątynia cała ta</figcaption>
						</figure>
					</div>

					<div class="col-sm-12 col-lg-6">
						<figure>
							<img src="img/06.jpg" alt="Piękne miejsce na Ziemi :)">
							<figcaption>Świątynia cała ta</figcaption>
						</figure>
					</div>
			</div>
		</article>
	</div>
</main>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	<script src="js/bootstrap.min.css"></script>

</body>
</html>

I CSS:

body
{
	background-color: #2f3640;
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	color: #efefef;
}
h1
{
	text-transform: uppercase;
	color: #0abde3;
	letter-spacing: 5px;
	font-size: 36px;
}
.content
{
	padding: 0;
	text-align: center;
}

Co daje taki efekt: https://zapodaj.net/a7e6df264b542.jpg.html

I teraz parę moich pytań:

1. To że w widoku xl (taki jak na screenie) odstępy pomiędzy 1 i 2, 3 i 4, 5 i 6 obrazkiem są takie to wynika z tego że tak ustawił je Bootstrap, są "efektem działania Bootstrapa"? I jak ewentualnie je edytować.

2. Czemu w widoku xs pojawia się scrollbar? https://zapodaj.net/0fe9323c9ec71.jpg.html

3. Czy to co zrobiłem jest poprawne(jak na fakt że zaczynam), czy nadaję się do wyrzucenia?

4. Czy warto uczyć się dalej z poradników z kanału Pasja Informatyki? Często wiedzę w sieci komentarze że prezentują przestarzały materiał.

5. Trochę z innej beczki, polecacie sprawdzać kod za pomocą validatora? Ma to sens dla kogoś kto się uczy?

Pozdrawiam