• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Aligning social media icons

Hi Guys,

Brand new to coding so please bear with me on here if I ask silly questions, each new trick is a brick for this house I am trying to build

I am trying to create a group of 4 social media icons that will sit side by side in the same location on the bottom right to my web pages. I was given some vague instructions by my tutor but they don't seem to be working, maybe you can see what I am doing wrong here.

An example of what they should appear like is in the image attached

This is my HTML

<!DOCTYPE html>
<html lang='en'>


<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta charset="utf-8">


<div class="container">
<img src='images/logo.png' style="width:180px;height:180px alt="logo"

<li><a href="index.html"> HOME </a></li>
<li><a href="tour.html"> TOUR </a></li>
<li><a href="tickets.html"> BUY TICKETS </a></li>
<li><a href="gallery.html"> GALLERY </a></li>
<li><a href="about.html"> ABOUT </a></li>

<img src='images/pic1.png' alt="home page image" class="image">

<div class="social-icons">
<img src='images/whatsapp.png' style="width:50px;height:50px" alt="whatsapp"
<img src='images/facebook.png' style="width:50px;height:50px" alt="facebook"
<img src='images/insta.png' style="width:50px;height:50px" alt="insta"
<img src='images/twitter.png' style="width:50px;height:50px" alt="twitter"

This is my CSS

body {
margin: 0;
background: #ffffff;
/* white */
color: white;
font-size: 18px;
font-family: "roboto", sans-serif;
font-weight: 300;

.container {
width: 80%;
margin: 0 auto;

header {
background: #121326;
height: 200px;

.logo {
float: left;
position: absolute;
left: 20px;
top: 0;

.image {
width: 100%;

nav {
float: right;

nav ul {
padding: 20px;
list-style: none;

nav li {
display: inline-table;
margin-left: 300px;
padding-top: 50px;

nav a {
color: #ffffff;
text-decoration: none;
text-transform: upper


nav a:hover {
color: #FCBA35;

.sidebar-image-gallery { width: 210px; }

.social-icons {

position: absolute;display: inline-block;
margin-left: auto;
margin-right: auto;
right: 0;

I apologise if I didn't need to post the entire lines of code, and I am aware there is some code in there that should not be there, but I am learning. The issue is, my icons don't appear bottom right and seem to be on top of each other, but I can only see one.


  • Home-Page.jpg
    214.4 KB · Views: 5
Hi Satoriwolf. The problem seems to be that your 4 last <img> tags are missing a '>' at the end. Also, the attribute "style" of your first img is missing a quote (").
Hello, @Satoriwolf! Welcome to Code Forum!

Glad you got a solution to this! Please make sure to mark the post as the solution. And could you place your code within our BBCode feature (<\>). This helps us copy and paste, and it’s easier to read.

New Threads

Buy us a coffee!

Top Bottom