How to move the division to the top-right in CSS-CodePudding

I want to move the division to the top-right. The div tag inside the footer

this is my HTML code for the footer:

<footer>
        <div class="footer">
        <br>
        <h1><img src="imageedit_2_7258851370.gif">  Genius High School</h1>
        <br>
        <div class="links">
          <h1><i class="fas fa-link"></i>  Links</h1>
          <ul class="navtwo">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="academics.html">Academics</a></li>
            <li><a href="worksheets.html">Worksheets</a></li>
            <li><a href="circulars.html">Circulars</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="message.html">Message</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
        <div class="tel">
          <h1><i class="fas fa-phone"></i>  Get in touch</h1>
          <br>
          <a class="phone_number" href="tel: 91-934-638-8595"> 91-934-638-8595</a>
        <br>
          <a class="phone_number" href="tel: 91-970-026-0200"> 91-934-638-8595</a>
        <br>
        <a class="phone_number" href="email:[email protected]">[email protected]</a>
        <br>
        <br>
        <br>
        <br>
        </div>
      </footer>

and this is my CSS:

.footer {
  margin-left: 20px;
}

.links{
  margin-left: 30%;
}

.tel {
  margin-left: 50%;
  font-size: medium;
}

.tel a {
  color: #0b0069;
  text-decoration: none;
}

I tried many things i changed the margin top to none to move it up and i set the margin bottom of the division too.

CodePudding user response：

You can try like so:

on1 {
background-color:red;
}

on2 {
background-color:black;
position:absolute;
right:0px;
top:0px;
}

<div class="on1">

<div class="on2"></div>


</div

CodePudding user response：

It's not totally clear what you are trying to do...but I'm guessing align all sections to the top? See snippet below.

footer {
  margin-left: 20px;
  display: inline-flex;
}

.links{
  margin-left: 30%;
}

.tel {
  margin-left: 50%;
  font-size: medium;
}

.tel a {
  color: #0b0069;
  text-decoration: none;
}

<!DOCTYPE html>
<html>


<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />


</head>

<body>
  <footer>
    <br>
    <h1><img src="imageedit_2_7258851370.gif">  Genius High School</h1>
    <br>
    <div class="links">
      <h1><i class="fas fa-link"></i>  Links</h1>
      <ul class="navtwo">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="academics.html">Academics</a></li>
        <li><a href="worksheets.html">Worksheets</a></li>
        <li><a href="circulars.html">Circulars</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="message.html">Message</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="tel">
      <h1><i class="fas fa-phone"></i>  Get in touch</h1>
      <br>
      <a class="phone_number" href="tel: 91-934-638-8595"> 91-934-638-8595</a>
    <br>
      <a class="phone_number" href="tel: 91-970-026-0200"> 91-934-638-8595</a>
    <br>
    <a class="phone_number" href="email:[email protected]">[email protected]</a>
    <br>
    <br>
    <br>
    <br>
    </div>
  </footer>

</body>

</html>