Как сделать мой веб-сайт адаптивным — текст таблицы накладывается друг на друга

body {
	margin: 0;
	padding: 0;
	background: radial-gradient(80% 40%, white, #cccccc);
}

header{
	overflow: hidden;
	height: 450px;
	display: block;
	margin: 0;
}

nav {
	width: 100%;
	height: 50px;
	background-color: rgba(192,192,192,0.3);
	margin: auto;
}


.wtf {
	padding-right: 50px;
	position: relative;
	bottom: 3px;
}

#logo {
	float: left;
	color: white;
	font-family: 'Concert One', cursive;
	padding-left: 20px;
}

p {
	margin: 0;
	padding: 0;
	text-align: center;
}

p.highlight {
	margin: 0;
	position: relative;
	bottom: 7px;
	cursor: pointer;
}

.learnMore {
	width: 13%;
	margin: 0 auto;
	cursor: pointer;
}

.learnMore h3:hover {
	background-color: #ddd;
  	color: black;
}

.learnMore h3 {
	border: 1px solid white;
	padding: 5% 15%;
}

ul {
	float:right;
}

li {
	display: inline;
	padding: 0 10px 0 10px;
	text-align: center;
}

a {
	text-decoration: none;
	color: white;
	font-size: 21px;
	margin: 0 0 3px 0;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

li a:hover {
  background-color: #ddd;
  color: black;
}

.image {
	background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}

.main {
	width: 100%;
	height: 400px;
	color: white;
	text-align: justify;
	font-family: 'Montserrat', sans-serif;

}

.main p,h1,h3 {
	text-align: center;
	position: relative;
}

.main h1 {
	top: 100px;
	font-size: 50px;
}

.main h3 {
	top: 90px;
}

.main p {
	top: 90px;
	left: 210px;
	text-align: center;
	font-size: 20px;
}

.img1 {
	width: 210px;
	height: 210px;
	filter: opacity(50%);
	padding-left: 10px;
}

.img2 {
	width: 220px;
	height: 220px;
	filter: opacity(50%);
	padding-right: 10px;
}

.smallimg {
	width: 50px;
	height: 50px;
	border: 3px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	color: black;
}

table {
	margin: 35px 27% 35px 27%;
	padding-bottom: 15px;
	padding-top: 15px;
	border-spacing: 15px;
}

.table1 {
	margin: 10px 26% 10px 26%;
	border-spacing: 5px;
}

td {
	color: #595959;
	font-size: 15px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

.theading {
	font-size: 40px;
	font-family: 'Yatra One', cursive;
	text-align: left;
}

.theading2 {
	font-size: 40px;
	font-family: 'Yatra One', cursive;
	text-align: right;
}

.alfaromeo {
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	text-align: center;
}

.opinions {
	width: 100%;
	height: 450px;
	background-color: rgba(255, 148, 77, 0.5);
}

.opinions h3 {
	color: snow;
	text-align: center;
}

.clients h1 {
	margin-top: 50px;
	padding-top: 40px;
	text-align: center;
	font-size: 35px;	
	font-family: 'Montserrat', sans-serif;
	text-shadow: 1px 1px 3px #000000;
	color: snow;
}

.clients h3 {
	text-align: center;
	bottom: 10px;
	font-size: 14px;	
	font-family: 'Montserrat', sans-serif;
}

.person1 {
	width: 100px;
	height: 100px;
	border: 1px solid grey;
	border-radius: 100%;
	margin-right: 20px;
	color: snow;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.person2 {
	width: 100px;
	height: 100px;
	border: 1px solid grey;
	border-radius: 100%;
	margin-right: 20px;
	color: snow;
	overflow: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.clientsTable {
	margin: 35px 27% 35px 27%;
	position: relative;
	padding-bottom: 5px;
}

.sayHello {
	width: 100%;
	height: 620px;
	background-color: #99ccff;
}

.sayHello div {
	margin: 0px 27% 0px 27%;
	padding-top: 40px;
}

.sayHello p {
	padding-top: 40px;
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
}

.sayHello h3 {
	color: snow;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	width: 65%;
	text-align: left;
	float: left;
}

.sayHello table {
	float: left;
	border-spacing: 20px;
	color: snow;
	position: relative;
	bottom: 20px;
	overflow: hidden;
}

.sayHelloTable img {
	width: 30px;
	height: 30px;
	border: 2px solid black;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	padding: 3px;
	background-color: snow;
}

.sayHelloTable td {
	color: snow;
}

.contactForm {
	border-radius: 7px;
  	background-color: snow;
  	padding: 20px;
  	float: right;
  	width: 200px;
  	height: 300px;
  	position: absolute;
  	left: 650px;
}

form {
	width: 180px;
	height: 350px;
}

input[type=text], select, textarea {
 	width: 100%;
  	padding: 12px;
  	border: 1px solid #ccc;
  	border-radius: 4px;
 	margin-top: 6px;
 	margin-bottom: 16px;
 	resize: none;
}

label {
    font: normal 12px 'Montserrat', sans-serif !important;
}

footer {
	position: absolute;
	color: white;
	text-align: center;
	width: 100%;
	height: 50px;
	background-color: rgba(153, 204, 255, 0.8);
	border-top: 1px solid snow;
}

.copyright {
	font-size: 20px;
	font-family: 'Concert One', cursive;
	text-align: center;
	margin: 0px 27% 0px 27%;
	padding-top: 10px;
}


/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
		
		.clientsTable {
			width: 60%;
			margin: 0 auto;
			position: relative;
			padding-bottom: 20%
		}

		.opinions {
			width: 100%;
			height: 450px;
			margin: 0 auto;
			position: relative;
}
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

		.clientsTable td {
			width: 60%;
			margin: 0 auto;
			padding-bottom: 20%
		}
}

/* Landscape phones nad portrait tablets*/

@media (max-width: 767px) {
		.clientsTable {
			width: 60%;
			margin: 0 auto;
			padding-bottom: 20%
		}
}

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
	<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
	<title>Упражнение</title>
	<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity = "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin = "anonymous">
	<link rel = "stylesheet" type = "text/css" href = "style.css">
	<link href = "https://fonts.googleapis.com/css?family=Montserrat" rel = "stylesheet">
	<link href = "https://fonts.googleapis.com/css?family=Concert+One" rel = "stylesheet">
	<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity = "sha384-+0VIRx+yz1WBcCTXBkVQYIBVNEFH1eP6Zknm16roZCyeNg2maWEpk/l/KsyFKs7G" crossorigin = "anonymous">
	<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" integrity = "sha384-jLuaxTTBR42U2qJ/pm4JRouHkEDHkVqH0T1nyQXn1mZ7Snycpf6Rl25VBNthU4z0" crossorigin = "anonymous">
	<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity = "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin = "anonymous">
	<link href = "https://fonts.googleapis.com/css?family=Yatra+One" rel = "stylesheet">
	<link href = "https://fonts.googleapis.com/css?family=Rubik" rel = "stylesheet">
</head>

<body>

<header>
	<div class = "image">
     <nav>
     	<div id = "logo">
     	<h1><p class = "highlight">A|Developing</p></h1>
    	</div>
    	
    	<div class = "wtf">
    	<ul> 
    		<li class = "current">
    			<a href = "#">Home</a>
    		</li>
    		<li>
    			<a href = "#">Services</a>
    		</li>
    		<li>
    			<a href = "#">Clients</a>
    		</li>
    		<li>
				<a href = "#">Team</a>
    		</li>
    		<li>
    			<a href = "#">Contact</a>
    		</li>
    	</ul>
    	</div>
    </nav>
	
	<div class = "main">
		<p>Can you build the website of my dreams?</p>
		<h1>YUP, WE CAN DO THAT.</h1>
		<section class = "learnMore"><h3>Learn More</h3></section>
	</div>
	</div>
</header>

	<table align = "center">
		<tr>
			<td class = "theading"><font color = "black">Web <b>Development</b></font></td>

		</tr>
		<tr>
			<td style = "text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuere iaculis neque, sit amet convallis neque convallis quis.
		<br><br><br>
			Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
			<td><img class = "img1" src = "search.png" width = "150" height = "150" align = "right"></td>
		</tr>
	</table>

	<table align = "center"  class = "table1">
		<tr>
			<td class = "theading2" colspan = "2"><font color = "black">Identity <b>Branding</b></font></td>
		</tr>
		<tr>
			<td><img class = "img2" src = "wireless-connection-free-technology-icons-174546.png" width = "150" height = "150" align = "right"></td>
			<td style = "text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuer  e iaculis neque, sit amet convallis neque convallis quis.
		<br><br><br>
			Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
		</tr>
		<br><br>
	</table>

	<table>
		<tr>
			<td rowspan = "2"><img class = "smallimg" src = "businessman.png"></td>
			<td class = "alfaromeo"><b>Branding & Identity</b></td>
			<td rowspan = "2"><img class = "smallimg" src = "un-anniversaire-assez-remarqu--dans-le-monde-du-web-celui-des-20-ans--16.png"></td>
			<td class = "alfaromeo"><b>Web & Graphic Design</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.  
		</tr>

		<tr>
			<td rowspan = "2"><img class = "smallimg" src = "Mobile-Smartphone-Tablet-icon.png"></td>
			<td class = "alfaromeo"><b>Mobile App Development</b></td>
			<td rowspan = "2"><img class = "smallimg" src = "005399d32e87304799aa0f1ae8f47159.png"></td>
			<td class = "alfaromeo"><b>Animations</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
		</tr>

		<tr>
			<td rowspan = "2"><img class = "smallimg" src = "star-png-star-png-image-2156.png"></td>
			<td class = "alfaromeo"><b>UI/UX</b></td>
			<td rowspan = "2"><img class = "smallimg" src = "black-camera-logo-icon-download-4.png"></td>
			<td class = "alfaromeo"><b>Photography</b></td>
		</tr>
		<tr>
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
			<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. 
		</tr>
	</table>

	<div class = "opinions">
		<div class = "clients">
			<h1>Awesome</font> <b>Clients</b></h1>
			<h3>See some nice things our clients said about us.</h3>
		</div>

		<table class = "clientsTable" style = "height: 50%;">
		<tr>
			<td style = "width: 20%"><img class = "person1" src = "v9Y4ptj.jpg"></td>
			<td style = "width: 60%"><font color = "snow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.</font></td>
		</tr>

		<tr>
			<td colspan = "2" style = "width: 60%"><font color = "snow">Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aenean nec ullamcorper nisi, a sodales lorem.</font></td>
			<td style = "width: 20%"><img class = "person2" src = "Mityo-Pishtova-01.jpg"></td>
		</tr>
		</table>
	</div>

	<div class = "sayHello">
		<div>
		
			<p>Say <b>Hello</b></p>
			<br>
			<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice 
				bunch of people. :)</h3>

		</div>

		<table class = "sayHelloTable">
			<tr>
				<td><img src = "phone.png"></td>
				<td>(416)555-0000</td>
				<td><img src = "e-mail-logo.png"></td>
				<td>[email protected]</td>
			</tr>

			<tr>
				<td><img src = "twitter.png"></td>
				<td>@NAKATA</td>
				<td><img src = "facebook.png"></td>
				<td>@NAKATA</td>
			</tr>

			<tr>
				<td><img src = "80-google-plus-512.png"></td>
				<td>[email protected]</td>
				<td><img src = "pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
				<td>/NAKATA</td>
			</tr>
		</table>

		<div class = "contactForm">
  			<form action = "/action_page.php">
   			 	<label for = "fname">First Name</label>
    			<input type = "text" id = "fname" name = "firstname" placeholder = "Your name..">

    			<label for = "lname">Last Name</label>
    			<input type = "text" id = "lname" name = "lastname" placeholder = "Your last name..">

    			<label for = "subject">Subject</label>
   				 <textarea id = "subject" name = "subject" placeholder = "Write something.." style = "height:50px"></textarea>

    			<input type = "submit" value = "Submit">
  			</form>
  			
		</div>
	</div>
	
	<footer>
		<p class = "copyright">&copy; 2019 Made by Atanas Ivanov &diams; A|Developing</p>
	</footer>
</body>
</html>