3列脚位于左侧- html

Question

我试图有一个3列脚，但我所尝试的一切，文本只是坐在左边。下面是最新的，左边的列是一个接一个的。背景色和字体不工作，在索引页，字体似乎是粗体的原因。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
footer-container {
background-color: #99cc99;
font-family: "Open Sans";
padding-bottom: 4rem;
}
footer {
width: 80%;
height: 40vh;
background-color: #99cc99;
color: white;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
footer-heading {
display: flex;
flex-direction: column;
margin-right: 4rem;
}
footer-heading h2 {
margin-bottom: 2rem;
}
footer-heading a {
color: white;
text-decoration: none;
margin-bottom: 0.5rem;
}
footer-heading a:hover {
color: #336633;
transition: 0.3s ease-out;
}

<div class="footer-container">
<div class="footer">
<div class="footer-heading footer-1">
<h3>ADDRESS</h3>
<p>1234 Sandy Beach Road, <br> Queenscliffe, New Zealand</p>
</div>
<div class="footer-heading footer-2">
<h3>CONTACT</h3>
<p>Sally Sharp <br> Tel: [phone]</div>
</div>
<div class="footer-heading footer-3">
<h3>QUICK LINKS</h3>
<a href="About/About.html#Ammenities">Ammenities</a><br>
<a href="About/About.html#Availability">Availability</a><br>
<a href="About/About.html#Cancellation Policy">Cancellation Policy</a><br>
<a href="About/About.html#Location">Location</a><br>
<a href="About/About.html#What's nearby">What's nearby</a>
</div>
</div>
</div>

Answer 1

您的HTML在.footer-heading.footer-2的末尾有一个额外的</div>。此外，CSS选择器中类的语法是.className。针对类的CSS规则都没有在className之前包含.字符。

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.footer-container {
background-color: #99cc99;
font-family: "Open Sans";
padding-bottom: 4rem;
}
.footer {
width: 80%;
height: 40vh;
background-color: #99cc99;
color: white;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.footer-heading {
display: flex;
flex-direction: column;
margin-right: 4rem;
}
.footer-heading h2 {
margin-bottom: 2rem;
}
.footer-heading a {
color: white;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer-heading a:hover {
color: #336633;
transition: 0.3s ease-out;
}

<div class="footer-container">
<div class="footer">
<div class="footer-heading footer-1">
<h3>ADDRESS</h3>
<p>1234 Sandy Beach Road, <br> Queenscliffe, New Zealand</p>
</div>
<div class="footer-heading footer-2">
<h3>CONTACT</h3>
<p>Sally Sharp <br> Tel: [phone]
</div>
<div class="footer-heading footer-3">
<h3>QUICK LINKS</h3>
<a href="About/About.html#Ammenities">Ammenities</a><br>
<a href="About/About.html#Availability">Availability</a><br>
<a href="About/About.html#Cancellation Policy">Cancellation Policy</a><br>
<a href="About/About.html#Location">Location</a><br>
<a href="About/About.html#What's nearby">What's nearby</a>
</div>
</div>
</div>