How to align an image to the right with in CSS and HTML?

@charset="UTF-8";
@import url('https://fonts.googleapis.com/css?family=Krub');
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
/* CSS Document */

header {
	width:1900px;
	height:100px;
	margin:auto;
	background-color:black;
	font-family: 'Krub', sans-serif;
	color:white;
}
body{
    background-color: #363636;
}

nav {
	width:1900px;
	height:50px;
	margin:auto;
	background-color:#ff4425;
	font-family: 'Krub', sans-serif;
	position:absolute;
	display:table;
	top:100px;
	right:0px;
    border:none;
}

.button{
	float:left;
	color:black;
	border:none;
	background-color:#ff4425;
	transition-duration:1s;
	height:50px;
	width:100px;
	font-family: 'Krub', sans-serif;
	align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.computadores{
	float:left;
	color:black;
	border:none;
	background-color:#ff4425;
	transition-duration:1s;
	height:50px;
	width:150px;
	font-family: 'Krub', sans-serif;
	
}

.computadores:hover{
	background-color:white;
	color:black;
	border: 0.5px solid #2f3542;
	font-family: 'Krub', sans-serif;
	cursor:pointer;
}

.button:hover{
	background-color:white;
	color:black;
	border: 0.5px solid #2f3542;
	font-family: 'Krub', sans-serif;
	cursor:pointer;
	-webkit-transition:1s; /*Chrome e Safari */
}

#crono {
    color:#F26B38 ;
    background-color:#2A2A2A;
    font-family: 'Varela Round', sans-serif;
    font-size: 30px;
    border:none;
    
}
    
}

#destaque {
    font-family: 'Varela Round', sans-serif;
    background-color:white;
    color:black;
    display:table;
}

section{
	height:1000px; 

	color:white;
}
article.crono{
	height:500px;
	width:300px;
	
	font-family: 'Krub', sans-serif;
}

.saiba{
    background-color:white;
    color:black;
    border:none;
    width:200px;
    height:100px;
    font-size: 28px;
    font-family: 'Krub', sans-serif;
    transition:0.5s;
    border:5px solid black;
    
}

.saiba:hover{
    color:white;
    background-color:black;
    border:none;
    width:200px;
    height:100px;
}

#bulldog{
    color:#e84118;
    background-color:#2A2A2A;
    font-family: 'Varela Round', sans-serif;
    border:none;
    /* margin-left:800px; */
    
    
}

<div>

<header>
<h1 align="center" >ALFA HARDWARE</h1>
</header>

<nav>
<a href="index.html"><button class="button">INÍCIO</button></a>
<a href="_sections\computers.html"><button class="computadores">COMPUTADORES</button></a>
<a href="index.html"><button class="button">NOTEBOOKS</button></a>
<a href="index.html"><button class="button">CELULARES</button></a>
<a href="index.html"><button class="button">PERIFÉRICOS</button></a>
<a href="index.html"><button class="button">SOFTWARES</button></a>


</nav>

<section>
    <div id="destaque">
    <article style="float:left;">
    
    <div id="crono">
        <h1 style="display:block;">
        NZXT CRONOS
        </h1>
        <br>
    <span>A NOVA GERAÇÃO DE COMPUTADORES</span><br>
        
    <img style = "height:500px; width: 300px;"src= "_images/crono.png"><br>
        <a href=""><button class="saiba">SAIBA MAIS </button></a>
        
    </div>
    </article>
    
    <article style="float:left;">
        
        <div id="bulldog">
        <img style= "height:500px; width: 300px;" src="_images/bulldog.png">
            
            
            
    </div>
    </article>
        
    </div>
</section>

<style type="text/css">
#esquerda{
 	float: left;
}	
#direita{
		float: right;
	}
</style>

<div id="banner">
	<img src="seulogo.jpg" id="esquerda"/>
	<img src="seutexto.jpg" id="direita"/>
</div>