Почему когда я делаю margin появляется белое пространство?

Question

Павел @Angel700

новичок в программирований!

CSS

Почему когда я делаю margin появляется белое пространство?

и снова этот макет!
я не могу сделать цветные контейнеры
вот что происходит :

вот код :

<!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">
	<title>Bootstrap 101 Template</title>
	<link href="https://fonts.googleapis.com/css?family=Titillium+Web&dis.." rel="stylesheet">
	<style type="text/css">
		header > * {
			margin-top: 57px;
		}
		.icon {
			margin-top: 57px;
			margin-bottom: 57px;
			margin-left: 212px;
			height: 50px;		
		}
		/* 46px */
		.menu {
			margin-top: 20px;
		}
		.menu__item {
			margin-bottom: 127px;
			margin-left: 465px;
			font-size: 16px;
			text-transform: uppercase;
			font-family: 'Titillium Web', sans-serif;
			color: #fff;
			text-decoration: none;
			list-style: none;
			margin-left: 0;
			margin-left: 46px;
		}
		.menu__item a {
			color: #fff;
		}
		header {
			background-color: #87509c;
		}
		.text1 {
			font-weight: 700;
			margin-left: 290px;
			color: #ffffff;
			margin-bottom: 19px;
		}
		.text2 {
			font-weight: 700;
			margin-left: 207px;
			color: #ffffff;
			margin-bottom: 64px;
		}
		.block1 {
			background-color: #87509c;
		}
		.button1 {
			width: 293px;
			height: 73px;
			font-size: 18px;
			font-weight: 700;
			background-color: #eb7d4b;	
			color: #fff;	
			border: 0;
			border-radius: 5px;
			margin-left: 500px;
			margin-bottom: 147px;
		}
		.block2 {
			background-color: #17c2a4;
		}
		.text3 {
			font-size: 40px;
			font-weight: 700;
			color: #fff;
			margin-top: 119px;
			margin-left: 400px;
		}
	</style>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
	<header class="container-fluid d-flex">
		<img class="icon d-flex" src="logo.png">
		<nav>
			<ul class="menu d-flex justify-content-between">
				<li class="menu__item">
					<a href="#">Home</a>
				</li>
				<li class="menu__item">
					<a href="#">About</a>
				</li>
				<li class="menu__item">
					<a href="#">Work</a>
				</li>
				<li class="menu__item">
					<a href="#">Blog</a>
				</li>
				<li class="menu__item">
					<a href="#">Contact</a>
				</li>
			</ul>
		</nav>
	</header>
	<section class="block1">
		<h1 class="text1">Hi there! We are new kids on the block!</h1>
		<h1 class="text2">and we build awesome websites and mobile apps.</h1>
		<button class="button1">WORK WITH US!</button>
	</section>
	<section class="block2">
		<h1 class="text3">SERVICES WE PROVIDE</h1>
	</section>
</body>
</html>