Html 徽标和标题文本未对齐和重叠

我是网络编程新手，我在标题上遇到了问题，徽标和文本似乎总是重叠，我尝试了一些浮动和调整标题的大小，但似乎没有移动。这是我的代码：

CSS:

容器{ 宽度：1040px； 保证金：30像素自动； 边框：10px纯白； 边界半径：20px； 背景色：ffffff； } 标题{ 宽度：100%； 高度：200px； 利润率：15倍自动； 填充：4px； 溢出：隐藏； } .头部{ 宽度：60%； 高度：自动； 垂直对齐：顶部； 位置：相对位置； 浮动：左； 字号：28px； } img{ 位置：绝对位置； 垂直对齐：顶部； 浮动：左； } HTML:

家

印尼政府和政府的合作

---

移除位置：绝对位置；在CSS中的img下。假设这是您想要的，这将使所有内容都内联。它确实有帮助，尽管我已经找到了与您类似的匹配代码，无论如何，谢谢。

#container{
  width: 1040px;
  margin: 30px auto;
  border: 10px solid white;
  border-radius: 20px;
  background-color:#ffffff;
}

#header{
  width:100%;
  height:200px;
  margin:15x auto;
  padding: 4px;
  overflow:hidden;    
}

.headpart{
  width:60%;
  height:auto;
  vertical-align:top;
  position:relative;
  float:left;
  font-size:28px;
  }

 img{
   vertical-align:top;
   float: left;
 }

You can use this code.

        <div id="container">
        <div id="header">
        <div class="headpart">
        <img src="image/logo.jpg" width=135px height=120px>
            <p id="pheader"> Lembaga Pengkajian Pangan Obat obatan dan Kosmetika Majelis Ulama Indonesia</p>

    </div>
    </div>

        <div id="isi">
            <div id="content"></div>
            <div id="side"></div>
        </div>

        <div id="footer"></div>
    </div>


    #container
{
width:1040px;
margin:30px auto;
border: 10px solid black;
border-radius: 20px;
background-color:red;
}

#header
{
width:100%;
height:200px;
margin:15px auto;
padding: 4px;
overflow:hidden;
}

.headpart
{
width:60%;
height:auto;
vertical-align:top;
position:relative;
float:left;
font-size:20px;
}

img
{
position:absolute;
vertical-align:top;
float:left;
}
p
{
    margin-left:150px;
}