Can't get the <li>S inside the footer div


#1

Hello,

I'm doing the Build a resume exercise and I can't get the bottom unordered list to be on the same line.

It doesn't go inside the footer (it's below) even though I wrote the the display: inline in the css.

Here is the code:


<div id="footer">
            <ul>  
                <li>Contact</li><li> </li><li> </li>
                <li>Ask my picture</li><li> </li><li> </li>
                <li>Autograph?</li><li> </li><li> </li>
            </ul>
        </div>

and the CSS

#footer
{  
text-align: center;
border:2px solid #D45798;
height: 50px;
padding: 1px;
list-style:none;
clear: both;

   
 }

footer ul

{
display: inline-block;
margin: 10px 40px;
padding: 0;

}

footer li

{
    font-family: Cursive;
    font-weight: bold;
    font-size: 12px;
    color: #D45798;
    display:inline-block;
    list-style: none;

      }

I finally managed to get what I wanted but it was after trying several things randomly and refreshing the browser. I'd be glad if someone could correct the CSS :smile:

I hope you can help me with this.

Oh and please ignore the content of the resume. I was just trying random things :smile:


#2

if you edit/update your question, leave a reply so i get a notification. please post full html + css code and take the following steps to make it visible:

i would like to run the code, no image please


#3

@stetim94
I edited my post :smile:


#4

Looks good, what exactly is the problem?


#5

@stetim94
I have the feeling that putting display:inline everywhere isn't the right thing to do :confused:
I mean, it looks like my CSS works but it's super messy.