横幅<img/>未在标头中正确定位/定位

Question

尝试在我的webapp中添加横幅（运行man img）到我的标题元素。我是一名php开发人员，对css很可怕。我似乎无法弄清楚为什么图像不会按照我的愿望调整大小/位置，而是在标题“Diabetici”之后浮动在webapp（heart）徽标后面的标题中。

这是目前看起来的img：

如您所见，横幅位于页面的中间底部，太大了。我应该使用浮动吗？

我的部分HTML代码：

   <header>     
            <div id="logo">
            <img src="img/logo.png" alt="logo" />
            <h1 >Hartmeting voor diabetici</h1>
            </div>

        <div id="banner"><img src="img/rennen.png"></div>
    </header>

我的CSS代码：

#logo img {
  float: left;
  width: 100px;
  height: 100px;
  margin-left: 3%; 
}

#logo h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

#banner{
height:10px;
width:100px;
float:right;

}