How Do i position this H1 element in the top right

July 19, 2022

I Want to make it so the 100 appears in the top left corner of my div, I have it aligned to the left but it still appears on the bottom. Is there an easy way for me to fix it in CSS? I want it to look like the The character select cards in destiny 2

 <!DOCTYPE html>
        
        <html>
            <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <title>D2</title>
                <meta name="description" content="">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="../styles/styles.css">
            </head>
            <body>
                <div class="titan">
                    <h2>Titan</h2>
                    <h3>Exo Male</h3>
                    <h1>100</h1>
                </div>
                
        
        
        
                <script src="../js/index.js" async defer></script>
            </body>
        </html>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300');
    body{
        background-image: url(../assets/bg.PNG);
        background-repeat: no-repeat;
        background-size: cover;      
    }
    .titan{
        background-image: url('../assets/titan.PNG');
        width: 474px;
        height: 96px;
    }
    h1{
        color: #31ccf3;
        font-family: 'Roboto', sans-serif;
        padding-left: 5rem;
        float: right;
    }
    h2{
        color: white;
        font-family: 'Roboto', sans-serif;
        padding-left: 5rem;
    }
    h3{
        color: #c9c9c9;
        font-family: 'Roboto', sans-serif;
        padding-left: 5rem;
        font-size: 1em;
    }

>Solution :

The code is not clean (from a CSS perspective), however I would suggest doing display:flex;, justify-content:space-between; and align-items:center; on titan div, then add the first 2 heading in a div.

Further improvements I would do is to get rid of padding from Headings. This is bad practice. You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300');
body {
  background-image: url(../assets/bg.PNG);
  background-repeat: no-repeat;
  background-size: cover;
}

.titan {
  background-image: url('../assets/titan.PNG');
  width: 474px;
  height: 96px;
  display: flex;
  justify-content:space-between;
  align-items: center;
}

h1 {
  color: #31ccf3;
  font-family: 'Roboto', sans-serif;
  padding-left: 5rem;
  float: right;
}

h2 {
  color: white;
  font-family: 'Roboto', sans-serif;
  padding-left: 5rem;
}

h3 {
  color: #c9c9c9;
  font-family: 'Roboto', sans-serif;
  padding-left: 5rem;
  font-size: 1em;
}

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>D2</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../styles/styles.css">
</head>

<body>
  <div class="titan">
    <div>
      <h2>Titan</h2>
      <h3>Exo Male</h3>
    </div>
    <h1>100</h1>
  </div>




  <script src="../js/index.js" async defer></script>
</body>

</html>