This code is for a footer. Originally, the different columns were meant to sit next to each other (col-md-4 x 3). However, after editing the code, the columns are now stacked on top of one another. The content is supposed to occupy 3 columns in one row, making up a total of 12 columns.
footer {
background-color: #000000;
background-size: cover;
font-family: 'Roboto', sans-serif;
color: #ffffff;
padding-bottom: 5%;
padding-top: 2%;
}
.westernaustralianmuseum {
color: #AD8A51;
}
.footercontact {
margin-top: 20px;
}
.footeroptions {
margin-top: 20px;
}
.footerlocation {
margin-top: 20px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7c71716a6d6a6c7f6e5e2a3028302f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<footer class="container-fluid">
<!-- div for the main image to stretch s to the edge of the page-->
<div class="container">
<!-- div to hold the content in the middle of the page-->
<div class="row">
<!-- a row that gives us access to the BS columns-->
<div class="col-md-4 footercontact">
<h3>Contact</h3>
<p>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f78592949287839e9899b79a828492829ad98096d9909881">[email protected]</a></p>
<p>Phone: 1300 134 081</p>
<h3>Follow us</h3>
<img src="https://via.placeholder.com/50" alt="instagram icon">
<img src="https://via.placeholder.com/50" alt="twitter icon">
<img src="https://via.placeholder.com/50" alt="facebook icon">
<img src="https://via.placeholder.com/50" alt="youtube icon">
</div>
<div class="col-md-4 footeroptions">
<p><span class="westernaustralianmuseum">Western Australian Museum</span></p>
<p>Membership</p>
<p>Donate</p>
<p>About</p>
</div>
<!-- row -->
<div class="col-md-4 footerlocation">
<h3>Location & Hours</h3>
<ul class="list-inline justify-content-center">
<li class="list-item">47 Cliff Street</li>
<li class="list-item">Fremantle, WA</li>
<li class="list-item">6160</li>
<li class="list-item">Open Daily:</li>
<li class="list-item">0930Am to 0500Pm</li>
</ul>
</div>
</div>
<!-- row -->
</div>
<!-- container -->
</footer>
</body>I am new here and still learning, thank you!