Hello,

I am having trouble styling my footer for a treehouse assignment and need some guidance. My name is meant to be on the left and the links on the right. The links have collapsed on me and I am wondering if there is a better way of aligning them all together more effectively. I have played around trying to use flexbox here with limited success. As this is an assignment I can not post all my code, but will add the footer coding I have done. Thank you for your help in advance.

HTML

    <div id="footer">
        <footer class="clearfix">
            <h3 id="student-name">Tracy Excell</h3>
                <h3><a href="#home" id="top">Back To Top</a></h3>
                <h3><a href="#home" class="tablet-info">Home</a></h3>
                <h3><a href="#portfolio" class="tablet-info">Portfolio</a></h3>
                <h3><a href="#contact" class="tablet-info">Contact</a></h3>

        </footer>
</div>

Base CSS

/* footer styles*/

footer { margin-top:1em; display: block; border-top: solid 2px #456e6e;
margin-bottom: 1em; }

top {

float: right;
text-decoration:none;
color: #456e6e;
margin-top: -2.25em;

}

top:hover{

color:black;

}

footer a { text-decoration: none; color: #456e6e; }

footer a:hover{ color:black; }

wrapper {

min-height: 100vh;

}

NAV CSS

.tablet-info {

display: none;

} for small screen sizes

for larger screen sizes

.tablet-info {

display: inline-block;
float: right;
margin-top: -2em;
margin-right:.25em;
margin-left:.25em;

}

student-name {

margin-top: 1.8em;

}

.clearfix { content: ""; display: table; clear: both; }

}