skip to Main Content

I tried to make my footer to look like a column of links next to one another but I cant seem to get them to each other. Instead one keeps centering and the other goes the far left. I do not know what to do please help.

a{
    color: red;
    font-size: 30px; 
}

.Information h1{
    
    margin-top: 25px;
    margin-right: 25px;
    color: red;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 30px;
    
    
}
.Information h2{
    font-size: 30px;
    position: absolute;
    top: 10px;
    
    
}
footer{
    background-color: white;
}

2

Answers


  1. Because of anchor tag margin issue.

    a{
    margin-right: value;
    margin-left: value;
    display: inline-block;
    }
    

    update the code

    Login or Signup to reply.
  2. Since HTML is missing in your example i can only asume, what exactly you want. "A column of links" sounds more like a list to me, i.e. one item below the other. On the other hand you mentioned "next to one another". You will find both variants in my snippet (there are several ways to solve this, i chose the flexbox model). Hope this helps.

    footer {
        display: flex;
        padding: 0.5em;
        height: 25vh;
        background: orange;
    }
    
    footer.demo1 {
        flex-direction: column;
        align-items: flex-end;
    }
    footer.demo2 {
        column-gap: 0.5em;
        justify-content: flex-end;
    }
    
    footer h2 {
        margin: 0 0 5px;
        font-size: 1.25em;
        line-height: 1;
    }
    
    footer a {
        color: red;
    }
    Aligned right - list like
    <footer class="demo1">
        <h2><a href="#" alt="Item">Item</a></h2>
        <h2><a href="#" alt="Item">Item</a></h2>
    </footer>
    <br>
    Aligned right - side by side
    <footer class="demo2">
        <h2><a href="#" alt="Item">Item</a></h2>
        <h2><a href="#" alt="Item">Item</a></h2>
    </footer>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search