两个语义元素被读为一个

Question

（这是我第一次编码我自己的页面 - 如果看起来很明显，则很抱歉）

网页的布局是：header，section.hero，section。页脚。

问题是，尽管.middle和.inform是单独的部分，但浏览器将它们读为一个，例如。如果我更改一个人的背景色，它们都会改变。这也意味着，尽管我希望.infoborm在新线路上显示为水平形式，但它的标题和前2个盒子在右侧的角落挤压。

我尝试了＆lt; br＆gt;在.middle和width之后：100％和显示：block of class和inforform的容器中，但没有任何区别。我还仔细检查了.Infoform不是.middle的子元素。

这是代码：

.middle{
    display:inline-block;
}

article{
    float:left;
    width: 60%;
    font-size:30px;
    padding-left: 20px;
}

article h2{
  font-family:'Prompt', sans-serif;
  font-size: 45px;
  color:#1C5C35;
}

article ul {
    list-style-image:url(images/bullet\ point\ dark\ green\ small.jpg);
    margin-left:20px;
}

aside div.stone_pic img{
    float:right;
    width:35%;
}

.infoform {
    background-color:#34A85C;
    color:white;
    font-family:'Prompt', sans-serif;
    font-size:30px;
    width:100%;
}

.container h3{
    padding-left:20px;
}

button{
    background-color:#F15A23;
    color:white;
    width:10%;
    border-radius:8px;
   }

<section.middle> 

<article>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus arcu, blandit nec tellus et, auctor consectetur mi. Pellentesque sit amet neque sit amet sapien pulvinar varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus pulvinar lacinia. Duis vehicula purus non est ullamcorper, at scelerisque velit pharetra. Sed rhoncus dolor nec volutpat convallis.  
</p>
<ul>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus arcu, blandit nec tellus et, auctor consectetur mi. Pellentesque sit amet neque sit amet sapien pulvinar varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla tempus pulvinar lacinia. Duis vehicula purus non est ullamcorper, at scelerisque velit pharetra. Sed rhoncus dolor nec volutpat convallis.  
</p>
</article>

<aside>
    <div class="stone_pic">
    <img src="images/stone_hose2.jpg" alt="side image-powerhose washing stone">
    </div>
</aside>

</section.middle> <br>


<section class="infoform" style="display:block; width:100%;"> 

<div class="container" style="display:block; width:100%;">
    <h3>Request a callback</h3>
    <form class="form-inline" action="/action_page.php">
        <label for="name">Name:</label>
        <input type="text" class="form-control"
            id="name" placeholder="Enter name"
            name="name">
        <label for="email">Email:</label>
         <input type="email" class="form-control"
            id="email" placeholder="Enter email"
             name="email">
            <label for="tel">Tel:</label>
        <input type="number" class="form-control"
            id="tel" placeholder="Enter phone number"
            name="tel" required minlength="11">
            <label for="service required">Service Required:</label>
        <input type="text" class="form-control"
            id="service required" placeholder="Service required"
            name="service required" required minlength="11">
            <button type-submit>Submit</button>
       
    </form>
</div>

</section>

请注意，由于图像没有显示其看起来好像在文章旁边的列中，而不是在网页上显示的图像下方挤压。

有人可以暗示为什么这些部分没有分开？

提前致谢。

Answer 1

问题

主要问题是：

<!-- This is incredibly invalid -->
<section.middle>...</section.middle>
<!-- This is what it should be -->
<section class='middle'>...</section>

次要问题：

<button type-submit>Submit</button>
<!-- Should be -->
<button type='submit'>Submit</button>
<!-- OR -->
<button>Submit</button>

ID和名称属性不应有空间。

不要使用name =“名称”可能会导致意外行为。

.middle {

  display: inline-block;

}

article {

  float: left;

  width: 60%;

  font-size: 30px;

  padding-left: 20px;

}
article h2 {

  font-family: 'Prompt', sans-serif;

  font-size: 45px;

  color: #1C5C35;

}
article ul {

  list-style: none;

  margin-left: 20px;

}
article ul li::before {

  content: '