I try to align a font on the right side of the screen inside a HEADER
header, but I can not even use a float: right
. But, there it goes to the right, but I lose the other alignment settings. I want to send those three bars to the right side. Image below:
Thisismyhtml:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Font</title>
<!-- Link para Icon Fontes Externos -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<i class="fa fa-search"></i>
<h1 class="logo">Sample Sample</h1>
<i class="fa fa-bars"></i>
</header>
</body>
</html>
This is my CSS:
*{padding: 0;
margin: 0;
}
body{
font-family: arial, helvetica, freesans, sans-serif;
font-style: normal;
}
header{
height: 70px;
line-height: 70px;
background: #674323;
color: white;
font-size: 1.3em;
}
header .logo{
text-align: center;
display: inline-block;
margin: 0 auto;
text-shadow: 1px 1px 1px black;
}
.fa-search{
font-size: 1.58em;
text-align: left;
margin-left: 20px;
}
.fa-bars{
display: inline-block;
font-size: 1.8em;
text-align: right;
margin-right: 20px;
border-radius: 10px;
background: white;
color: #674323;
padding: 2px 5px 1px 5px;
box-size: border-box;
vertical-align: middle;
}