foot showed on one line because the default style contains display: block. Update that attribute to display: inline-block and you can see all items of footer in one line.
#footer {
clear:both;
max-height:200px;
width: 100%;
background-color: yellow;
}
#footer h1 {
display: inline-block;
}
#footer i {
margin: 10px;
font-size: 30px;}
<div id="footer">
<h1>foot</h1>
class="fab fa-facebook">
^__i class="fab fa-twitter">c
^__i class="fab fa-youtube">d
</div>