I experimented with this code and attempted to modify the display properties of the header and div tags. However, I encountered an issue where the image in the next div tag appeared in the top left corner. My goal is to position it on the next line to the right of the header tag (aligned to the right). This pertains to the positioning of div and header tags.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body style="background-color: #1D1D1D" >
<div id="main" class="">
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"><a href="/"> Logo of site</a>
</h1>
</header>
<div id="">
<div id="" class="">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
</div>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>