I don’t know how it come like that, in top of each other. " Not web or mobile friendly !!"
How to fix it?
Which element did I missed or I have to adjust? 
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
#box1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #2ecc71;
}
#box2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #2ecc71;
}
h1 {
background-position: center;
width: 955px;
margin-left: auto;
margin-right: auto;
paddin: auto;
font-family:'HussarEkologicznyRegular';
font-weight: normal;
font-style: normal;
font-size: 50px;
word-break: break-all;
text-indent: 10px;
}
h2 {
background-position: center;
width: 955px;
margin-left: auto;
margin-right: auto;
paddin: auto;
font-family:'HussarEkologicznyRegular';
font-weight: normal;
font-style: normal;
font-size: 20px;
word-break: break-all;
text-indent: 10px;
}
.navbar {
width: 100%;
background-color: #2ecc71;
overflow: auto;
max-width: 1000px;
margin: auto;
}
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
max-width: 1000px;
margin: auto;
}
.navbar a:hover {
background-color: #000;
max-width: 1000px;
margin: auto;
}
.active {
background-color: #3498db;
}
.footer {
position: ;
left: 0;
bottom: 0;
width: 100%;
background-color: #2ecc71;
color: white;
text-align: center;
}
</style>
</head>
<body>
<header>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hussar-ekologiczne" type="text/css" />
<link rel="stylesheet" type="text/css" href="protofilio.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<nav><div class="navbar">
<a class="active" href="https://www.joinmysfiteam.com/18326129"><i class="fa fa-fw fa-home"> </i> Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> </a>
<a href="mailto:nolimit5ster@hotmail.com?Subject=Hello%20again"><i class="fa fa-fw fa-envelope"></i></a>
<a href="https://twitter.com/afronomad_" class="fa fa-twitter"></a>
<a href="https://instagram.com/afronomad.eth" class="fa fa-instagram"></a>
<a href="https://www.linkedin.com/in/anasib/" class="fa fa-linkedin"></a>
<a href="https://www.reddit.org/bild96/" class="fa fa-reddit"></a>
<a href="https://github.com/bild96"><i class="fa fa-fw fa-github"></i> </a>
</div><nav/> </header>
<h1>afro nomad</h1>
<div id="box1">
<p>Long before I became recognized for my work in travel photography industry, I had a vision in mind. I desired to take stunning photographs, capturing emotions as much as interactions. My inspiration comes from real locations, people, and places that I have been so lucky to see in my lifetime.</p>
</div><br>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79598775-cd17a880-80e4-11ea-837a-e571e54a5786.jpg" alt="NYC" width="600" height="400">
<div class="desc">Traveling – it leaves you speechless, then turns you into a storyteller.</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79598504-5f6b7c80-80e4-11ea-8246-bd1cb3a66eff.jpg" alt="Havana" width="600" height="400">
<div class="desc">Better to see something once than hear about it a thousand times.</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79644577-2564ae00-81aa-11ea-8a76-72bb4b2af784.jpg" alt="Lights" width="600" height="400">
<div class="desc">The most beautiful in the world is, of course, the world itself.</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79644425-3365ff00-81a9-11ea-96a2-3c7e884f51bc.jpg" alt="LA"width="600" height="400">
<div class="desc">Work, Travel, Save, Repeat</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79672879-024ff380-81d6-11ea-8ca3-0996fbe72e3e.jpg" alt="summer"width="600" height="400">
<div class="desc">Life is short and the world is wide.</div>
</div><br>
<h2>My Journey</h2>
<div id="box2">
<p>Traveling for me puts things into perspective. It allows me to realize that there are far bigger things that my problems. So what if the wifi is slow or if my favorite ramen place is closed. Traveling allows you to see that the world is not always about you. It allows me to see how other people live and what they have to deal with on a daily basis.</p>
</div><br>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79673126-de8dad00-81d7-11ea-8c1f-74184b23779d.jpg" alt="NYC" width="600" height="400"> <div class="desc">Dare to live the life you’ve always wanted.</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79673128-dfbeda00-81d7-11ea-872e-210e5c1018f0.jpg" alt="Havana" width="600" height="400"> <div class="desc">Take only memories, leave only footprints.</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79673129-e0f00700-81d7-11ea-84e3-7236acf5fef9.jpg" alt="Lights" width="600" height="400"> <div class="desc">Everything you do is based on the choices you make</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79673131-e1889d80-81d7-11ea-993b-adca65d2ea1c.jpg" alt="LA"width="600" height="400"> <div class="desc">Be fearless in the pursuit of what sets your soul on fire.</div>
</div>
<div class="gallery">
<img src="https://user-images.githubusercontent.com/52472445/79673133-e2b9ca80-81d7-11ea-9bbc-0c7c21a00e22.jpg" alt="summer"width="600" height="400"> <div class="desc">Travel makes one modest. You see what a tiny place you occupy in the world.</div>
</div><br>
<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script>
<script type='text/javascript'>
kofiwidget2.init('Support Me on Ko-fi', '#29abe0', 'I3I41L8TN');
kofiwidget2.draw();
</script>
<br><footer><p div class="footer">Copyright © 2020 afronomad.eth <a href="https://github.com/bild96"><i class="fa fa-fw fa-github"></i></a></p> </footer>
</body>
</html>