need help for fix code in html for oage format : hello i need my page to look like this
[this what im trying to do][1]


but thats what i got [enter image description here][2]

thats the whole page i hope i can get a help with it i have a problem with layout and color of navigation 
and the picture up is at the top left  
i tried to work at it and took hours and i cant reach any result with it 





  [1]: https://i.stack.imgur.com/I8pt1.jpg
  [2]: https://i.stack.imgur.com/7r0HH.jpg

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8"/>
    	<title>Digital Cloud</title>
    	<style type="text/css">
    	
    			#container{
    			width: 800px;
    			height: 700px;
    			background-color: white;
    			margin-left: auto;
    			margin-right: auto;	 
    			position: fixed;
    			top: 20%;
               left: 30%;

    		}
    		
    		#logo{
    			margin-top:15px;
    			width: 200px;
    			height: 200px;
    		
    		
    		}
    		
    		#ending{
    			float: right;
    			text-align: center;
    			margin: 120px;
    			
    			
    			
    		}
    		
    		#navigation{
    			background-color: #3c99dc;
    			float:left;
    			margin-left: 5px;
    			margin-bottom: 15px;
    			font-size: 20px;
    			width: 190px;
    			height: 50px;
    			text-align: center;
    		}
    		
    		#content{
    			text-align: center;
    		}	
    		
    	
    		#text{
    			float: left;
    			margin-bottom: 10px;
    		}
    			
    		img{
    			width: 260px;
    			height: 150px;
    			float: left;
    		}
    		
    		#texting{
    			width: 258px;
    			height: 200px;
    			float: left;
    			margin-left: 6px;
    			margin-bottom: 7px;
    			margin-left: 3px;
    		}
    		
    		#description{
    			text-align: center;
    			font-size: 14px;
    		}
    	</style>
    </head>
    <body>
    	<div id="logo">
    	<h1><img src="images/logo.jpeg" alt="logo" /></h1>
    	</div>
    	<div id="container">
    		<div id="navigation">
    			<div id="nav01">
    			<nav> <a href="#"> Business </a></nav>
    			</div>
    		</div>	
    		<div id="navigation">
    			<div id="nav01">
    			<nav> <a href="#"> Pricing </a></nav>
    			</div>
    		</div>
    		<div id="navigation">
    			<div id="nav01">
    				<nav> <a href="#"> Community </a> </nav>
    			</div>
    		</div>
    		<div id="navigation">
    			<div id="nav01">
    				<nav> <a href="#"> Help </a> </nav>
    			</div>
    		</div>
    		<div id="content">
    			<h1>Droplets</h1>
    			<p>We rent out easy-to-deploy and resizable cloud servers.</p>
    			<h2>Deploy in 55 seconds</h2>
    		</div>
    		
    	<div id="textimg">
    		<div id="texting">
    			<h3>1. Select an image or app</h3>
    			<p><img src="images/image.jpeg" alt="Representative picture of server's image" /></p>
    			<div id="description">
    			<p>Choose from our library of distros and apps, or create a Droplet from a snapshot.</p>
    			</div>
    		</div>
    		
    		<div id="texting">
    			<h3>2. Choose a size</h3>
    			<p><img src="images/size.jpeg" alt="Representative picture of server's size" /></p>
    			<div id="description">
    			<p>Select a Droplet size based on the resources you need. You can resize at any time from the control panel.</p>
    		</div></div>
    		<div id="texting">
    			<h3>3. Select a region</h3>
    			<p><img src="images/region.jpeg" alt="Representative picture of server's region" /></p>
    			<div id="description">
    			<p>Deploy your Droplet to any of our datacenter locations around the world.</p>
    			</div>
    		</div>
    		
    	</div>
    	
    	<div id="ending">
    	<em>48,087,734 DROPLETS LAUNCHED</em>
    	<em>&copy; COPYRIGHT 2017 DIGITAL CLOUD INC.</em>
    	</div>



    </body>
    </html>

<!-- end snippet -->

