Search code examples
javascripthtmlcsstextalignment

Why the text is not centered in mobile devices (HTML)

Website screenshot in PC

Website screenshot in the mobile device

Here is the HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@700&display=swap" rel="stylesheet"
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "boi.css">
</head>
<body>
  <div class="first">
    <h1>Hey!</h1>
</div>
</body>
</html>>

and this is the CSS code

body {
background-color: rgb(20, 18, 18);
}
.first {
    position: relative;
    margin-right: 300px;
    color: white;
        text-align: center;        
        font-family: 'PT Sans Narrow', sans-serif;
}
Solution

  • use following css

    .first
{
   color: white;
   text-align: center;
}
.first h1
{
   display: inline-block;
}