CSS responsive menu icon text

Issue

I am working on improving my portfolio website (www.kikidesign.net) and am currently working on the footer. I'm trying to make it responsive in which the link (with the icon) will be able to stay the same but will be re-arranged in response to the browser window. For example, for desktop version, it will be in one line, but for tablet version, it will be two lines with two links in each row, and for mobile version, it will be like a list. However, I couldn't keep the icon and text in one place. When I move the browser window around, the icons keep popping out of their place. What should I do to fix it?

HTML

<div id="footercontent">
                <ul class="ca-menu">
                <li class="about2">
                <a href="<?php echo get_option('home'); ?>/about" >
                    <span class="aboutimg"></span>About Me
                </a>
                </li>
                <li class="contact2">
                <a href="<?php echo get_option('home'); ?>/contact" >
                    <span class="contactimg"></span>Contact
                 </a>
                </li>
                <li class="download">
                <a  href="kikidesignResume.pdf">
                    <span class="downloadimg"></span>Resume
                </a>
                </li>
                <li class="facebook">
                <a href="https://www.facebook.com/kikidesignnet" >
                    <span class="facebookimg"></span>Facebook
                 </a>
                </li>
              </ul>
            </div>

CSS

#footercontent {
    position: relative;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    min-height: 100px;
}
#footercontent .ca-menu {
    width: 100%;
    padding: 0;
    list-style: none;
    margin: 30px auto;
}
#footercontent .ca-menu li {
    width: 23%;
    height: 100%;
    position: relative;
    display: inline-block;
    background: #2d1d53;
    padding: 0 20px;
    float: left;
}
#footercontent .ca-menu li a {
    text-decoration: none;
    text-align: left;
    font-family: 'PrintClearlyRegular';
    font-weight: normal;
    font-style: normal;
    font-size: 1.75em;
}
#footercontent .ca-menu li a:hover {
    text-decoration: underline;
    text-decoration-color: white;
    -moz-text-decoration-color: white;
    -webkit-text-decoration-color: white;
    -o-text-decoration-color: white;
    -ms-text-decoration-color: white;
}
.ca-menu li:hover .aboutimg, .ca-menu li:hover .contactimg, .ca-menu li:hover .downloadimg, .ca-menu li:hover .facebookimg {
    color: #ffffff;
    /**font-size: 30px;**/
    opacity: 1;
}
.aboutimg {
    display: inline-block;
    width: 50px;
    height: 60px;
    text-align: center;
    background: url(images/girlIcon2.png) no-repeat 0 0;
    opacity: 0.3;
    vertical-align: middle;
    margin-top: -10px;
    margin-right: 10px;
    }
.ca-menu .about2 a {
    color: #f9a145;
    border: none;
    text-decoration: none;
}
#contactimg {
    padding: 15px 0 12px 0;
}
.contactimg {
    display: inline-block;
    width: 50px;
    height: 60px;
    background: url(images/contact.png) no-repeat 0 0;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: -8px;
    opacity: 0.3;
    margin-right: 10px;
}
.ca-menu .contact2 a {
    color: #4595d1;
    border: none;
    text-decoration: none;
    padding: 20px;
}
.downloadimg {
    display: inline-block;
    width: 50px;
    height: 60px;
    background: url(images/download.png) no-repeat 0 0;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: -8px;
    opacity: 0.3;
    margin-right: 10px;
}
.ca-menu .download a {
    color: #f7e400;
    border: none;
    text-decoration: none;
    padding: 20px;
}
.facebookimg {
    display: inline-block;
    width: 50px;
    height: 60px;
    background: url(images/facebook.png) no-repeat 0 0;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    margin-top: -8px;
    opacity: 0.3;
    margin-right: 10px;
}
.ca-menu .facebook a {
    color: #B0B0B0;
    border: none;
    text-decoration: none;
    padding: 20px;
}

Solution

#footercontent .ca-menu {
    width: 100%;
    padding: 0;
    list-style: none;
    margin: 30px auto;
}
#footercontent .ca-menu li {
    position: relative;
    display: inline-block;
    background: #2d1d53;
    padding: 0 20px;
    float: left;
}

I have made changes to those two part.

And for mobile:

@media (max-width: 480px) {
  #footercontent .ca-menu li {
    position: relative;
    display: inline-block;
    background: #2d1d53;
    padding: 0 20px;
    float: left;
    width: 100%;
}
}

You can do same for other sizes also:

@media (min-width: 480px) and (max-width: 720px) {
      #footercontent .ca-menu li {
        position: relative;
        display: inline-block;
        background: #2d1d53;
        padding: 0 20px;
        float: left;
        width: 40%;  
    }
 }

DEMO

Answered By - mohamedrias