Объяснение в комментариях CSS, где вносятся изменения.
Делая высоту верхней части до 100%, чтобы она покрывала всю высоту жатки, можно соответственно отрегулировать.
Свойства, добавляемые в div с классом log
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.header{
position:relative;
margin:0;
padding:0;
height:30vh;/*giving height to header*/
}
.top{
height:100%;/*making it to cover complete header*/
border:1px solid #000;
}
.logo{
height:100%;
display:inline;
}
/* properties to be added to log div*/
.top>.log{
height: 100%;
margin: 0;
width: 200px;
display: inline;
float: left;
}
.element{
/*removing the clear property*/
border:1px solid #000;
float:left;
}
.leftc{
display:inline;
}
.leftc li{
list-style:none;
display:inline-block;
}
.rightc{
display:inline;
}
.rightc li{
list-style:none;
display:inline-block;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<header class="header">
<div class="top">
<div class="log">
<img src="http://thegamecorner.net/wp-content/uploads/2016/06/playstation-blue-background-logo-1920x1080-1.jpg" alt="logo" class="logo"/>
</div>
<div class="element">
<ul class="leftc">
<li><a href="index.html">Buy</a></li>
<li><a href="index.html">Rent</a></li>
<li><a href="index.html">Sell</a></li>
<li><a href="index.html">Mortgages</a></li>
<li><a href="index.html">Agent finder</a></li>
<li><a href="index.html">More</a></li>
</ul>
</div>
<div class="right">
<ul class="rightc">
<li><a href="#">List your rental</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
[1114 ] Я проверил бы это, у Вас есть example3.com, указывающий на надлежащее местоположение на диске. Также удостоверьтесь, что это не останавливается.
Нейтрализация к example1 происходит из-за обязательной записи без значения заголовка.