Align 2 classes with the same name horizontally - html

Question

Doing the MIMO HTML course and I've come across an issue where i cant get both elements with the class="column" attribute to align horizontally with display: inline-block;
I've already tried float:right and other properties to make them line up but something is stopping this happening
.column {
min-width: 300px; /*DOES NOT WORK*/
display: inline-block; /*DOES NOT WORK*/
vertical-align: top; /*DOES NOT WORK*/
}
<div id="footer">
<!--Footer-->
<div class="container">
<div class="column">
<h4>My Links
<!--My Links Header-->
</h4>
<p>
<a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
</a>
<br>
<a href="https://www.youtube.com">Youtube <!--Link-->
</a>
</p </div>
<div class="column">
<!--My Story Header-->
<h4>My Story
</h4>
<p>Hey there! I'm aspiring music website creator!
</p>
</div>
</div>
</div>
The display: inline-block; should put the elements side-by-side according to MIMO but this doesn't happen

Answer 1

you can float it to left.
you also have a wrong closing tag here...
</p </div>
.column {
min-width: 300px;
display: inline-block;
vertical-align: top;
float: left;
}
<div id="footer">
<!--Footer-->
<div class="container">
<div class="column">
<h4>My Links
<!--My Links Header-->
</h4>
<p>
Soundcloud <!--Link-->
<br>
Youtube <!--Link-->
</p>
</div>
<div class="column">
<!--My Story Header-->
<h4>My Story
</h4>
<p>Hey there! I'm aspiring music website creator!
</p>
</div>
</div>
</div>

Answer 2

Remove the broken </p in your HTML. And add float: left; to the column class.

Answer 3

you can use this example:
.column {
min-width: 300px; /*DOES NOT WORK*/
display: inline-block; /*DOES NOT WORK*/
vertical-align: top; /*DOES NOT WORK*/
}
<div id="footer">
<!--Footer-->
<div class="container">
<div class="column">
<h4>My Links
<!--My Links Header-->
</h4>
<p>
<a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
</a>
<br>
Youtube
</p>
</div>
<div class="column">
<!--My Story Header-->
<h4>My Story
</h4>
<p>Hey there! I'm aspiring music website creator!
</p>
</div>
</div>
</div>

Answer 4

Consider using flex. In your case, you would need to set the display to flex to to .container:
.container{
display: flex;
}
If you want both children to have the same width you can simply add flex: 1 to their CSS properties.
You can check the following snippet.
.container{
display: flex;
}
.column{
flex: 1;
}
<div id="footer">
<!--Footer-->
<div class="container">
<div class="column">
<h4>My Links
<!--My Links Header-->
</h4>
<p>
<a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
</a>
<br>
Youtube
</p>
</div>
<div class="column">
<!--My Story Header-->
<h4>My Story
</h4>
<p>Hey there! I'm aspiring music website creator!
</p>
</div>
</div>
</div>