Take a look at my code
header img{
width:10%;
vertical-align: middle;
}
header h1{
text-align: right;
display:inline;
position: absolute;
}
header {
width : 100%;
height: 1% ;
background: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href = "css\main.css" >
<link rel="stylesheet" href="css\responsive.css">
</head>
<body>
<header>
<div class = "container-fluid">
<img src="https://pixabay.com/static/uploads/photo/2015/12/15/09/31/badge-1093966_640.png" alt="">
<h1>KUNAL MEHTA</h1>
</div>
</header>
<section>
</section>
<footer>
</footer>
<script src = "js/main.js"></script>
</body>
</html>I need the h1 to be aligned to the right and both elements should be centrally aligned within the parent element. I am using Bootstrap so Bootstrap solutions are appreciated.