Newbie HTML5 & CSS3 issue with Locating some icons

Question

I am new to HTML5 & CSS and New since HTML when it first came to life

Anyhow I am working on learning how to code in HTML5 & CSS3 at the moment.. but have ran into a road block...

I want to get my Copy right information on the left of the footer background and my browser icons to the right of my footer background.... I have been playing with the problem for 9 hours I don't give up easily even tried some suggestions I found here which did not work...

If you would like to see actual page you can goto http://cowboy0629.ddns.net/test

.mainFooter {
  width: 97%;
  float: left;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #141476;
  margin: 2% 1.5% 2% 1.5%;
}
.footerIcons img.chrome {
  width: auto;
  height: 20px;
}
.footerIcons img.firefox {
  width: auto;
  height: 23px;
}
.footerIcons img.safari {
  width: auto;
  height: 23px;
}
.footerIcons { 
  float: right;
  height: 9px;
}
.footerIcons ul {
  float: right;
  padding: 0;
  margin: 0 auto;
}
.footerIcons li {
  float: right;
  list-style:none;
  margin-left:5px;
}
.footerIcons span p {
  height: 20px;
  float: left;
  color: #3399FF;
  width: 97%;
  margin: 9px;
}

<footer class="mainFooter">
  <div class="footerIcons">
    <span>
    <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com">cowboyDesigns.com</a></p>
    </span>

    <ul>			
      <li>
        <img class="chrome" src="images/icons/black-chrome-icon.png" alt="">
      </li>
      <li>
        <img class="firefox" src="images/icons/black-firefox-icon.png" alt="">
      </li>
      <li>
        <img class="safari" src="images/icons/black-safari-icon2.png" alt="">
      </li>
    </ul>
  </div>	
</footer>

Answer 1

The solutions above will fix the issue but they seem more likely to be hacks, p and ul are block elements and they won't be in the same line by default. you need to replace the existing CSS rules with the set the CSS as below

.mainFooter p {
color: #3399FF;
display: inline-block;
margin: 9px;
}

.mainFooter ul {
display: inline-block;
float: right;
list-style: none;
margin: 0 auto;
}

.mainFooter img {
width: 30px;
height: 30px;
margin: 5px;
}

there is no need for separate rules for each browser icon and use icons of same width and height.