CSS how to space between the elements and line-space vertically

Question

I am new to HTML. I'm trying to create a page that looks exactly like what I designed in XD, I created this using the language HTML & it is a Django project error page in HTML

The problem I'm having right now is that the margin and the placement of the elements are not matched and I found it difficult to align them accordingly. I need help and suggestion to make the spacing looks neater, text alignment, and the CSS thingy. The text font family wont override and what cause the issues. the Second pic shows the design I wanted to do actually. The code is implemented in Django/HTML.

/* Error Page */
@import url('http://fonts.cdnfonts.com/css/lemonmilk');
.body {
    color: #666;
    text-align: center;
    font-family: "Segoe UI", sans-serif;
    margin: auto;
}

.status-error-code {
    text-align: center;
    font-size: 222px;  
    color: #5AC69D;
    font-family: 'Lemon/Milk', sans-serif;
}

.content-first-message{
    margin: auto;
    text-align: center;
    font-size: 50px; 
    font-weight: 400;
}

.content-middle-message{
    margin: auto;
    text-align: center;
    font-size: 20px;  
    font-weight: 350;
}


.button-previouspage {
    font-family: "Segoe UI", sans-serif;
    align-items: center;
    appearance: none;
    background-color: #fff;
    border: 1px solid #0A79BD;
    border-radius: 200px;
    box-shadow: none;
    box-sizing: border-box;
    color: #0A79BD;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    height: 0.25em;
    width: 10em;
    justify-content: center;
    padding: 20px 20px 20px 20px;
    position: relative;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
}

.button-previouspage:active {
    border-color: #0A79BD;
    outline: 0;
}

.button-previouspage:focus {
    border-color: #05456C;
    outline: 0;
}

.button-previouspage:hover {
    border-color: #34CAE1;
}

.button-previouspage:focus:not(:active) {
    box-shadow: rgba(72, 95, 199, .25) 0 0 0 .125em;
}

.footer {
    margin-top: 5em;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    
.footer .links {
    display: flex;
    flex-direction: row;
    gap: 2em;
}

<head>
    <!-- Character Encoding and Viewport Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Website Title -->
    <title> 404 error </title>

    <!-- Fonts & Backgrounds & CSS -->
    <link href="http://fonts.cdnfonts.com/css/lemonmilk" rel="stylesheet">
    <link href="{% static 'landing/css/gotani.css' %}" rel="stylesheet">
    <link href="{% static 'landing/css/errorpage.css' %}" rel="stylesheet">
                
                
    <!-- Website Favicon/Icon  -->
    <link rel="icon" href="{% static 'landing/images/logo/favicon-96x96.png' %}">

</head>

<body>
    <div class="flex-item-middle-gotani-background">
      <a class="status-error-code"> 404 </a><br>
       <a class="content-middle-message">
          We're Sorry, <br> The page you're looking is not found! <br><br>
      </a>
      <button class="button-previouspage" type="button" onclick="history.back()"> < Go Back </button>
      
      <footer>
      <p>Here are a few links that may be helpful.</p>
        <p class="links">
          <a class="error-link-index"   href="{% url 'index' %}">Home</a>
          <a class="error-link-aboutus"  href="{% url 'about_us' %}">About Us</a>
          <a class="error-link-contactus"  href="{% url 'contact_us' %}">Contact Us</a>
          <a class="error-link-signin"  href="{% url 'login' %}">Sign In</a>
        </p>
      </footer>
    </div>
  </div>


</body>

could you please shorten your question very much? if possible — SL5net, Aug 03 '22 at 08:02
Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Anurag Srivastava, Aug 03 '22 at 08:05

score 0 · Answer 1 · answered Aug 03 '22 at 08:02

Maybe body {text-align: center;} ?

/* Error Page */

@import url('http://fonts.cdnfonts.com/css/lemonmilk');
.body {
  color: #666;
  text-align: center;
  font-family: "Segoe UI", sans-serif;
  margin: auto;
}

.status-error-code {
  text-align: center;
  font-size: 222px;
  color: #5AC69D;
  font-family: 'Lemon/Milk', sans-serif;
}

.content-first-message {
  margin: auto;
  text-align: center;
  font-size: 50px;
  font-weight: 400;
}

.content-middle-message {
  margin: auto;
  text-align: center;
  font-size: 20px;
  font-weight: 350;
}

.footer {
  margin: auto;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
}

.button-previouspage {
  font-family: "Segoe UI", sans-serif;
  align-items: center;
  appearance: none;
  background-color: #fff;
  border: 1px solid #0A79BD;
  border-radius: 200px;
  box-shadow: none;
  box-sizing: border-box;
  color: #0A79BD;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  height: 0.25em;
  width: 10em;
  justify-content: center;
  padding: 20px 20px 20px 20px;
  position: relative;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

.button-previouspage:active {
  border-color: #0A79BD;
  outline: 0;
}

.button-previouspage:focus {
  border-color: #05456C;
  outline: 0;
}

.button-previouspage:hover {
  border-color: #34CAE1;
}

.button-previouspage:focus:not(:active) {
  box-shadow: rgba(72, 95, 199, .25) 0 0 0 .125em;
}

.footer {
  margin-top: 5em;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer .links {
  display: flex;
  flex-direction: row;
  gap: 2em;
}

/* we add: */
body {
  text-align: center;
}

<head>
  <!-- Character Encoding and Viewport Meta Tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Website Title -->
  <title> 404 error </title>

  <!-- Fonts & Backgrounds & CSS -->
  <link href="http://fonts.cdnfonts.com/css/lemonmilk" rel="stylesheet">
  <link href="{% static 'landing/css/gotani.css' %}" rel="stylesheet">
  <link href="{% static 'landing/css/errorpage.css' %}" rel="stylesheet">


  <!-- Website Favicon/Icon  -->
  <link rel="icon" href="{% static 'landing/images/logo/favicon-96x96.png' %}">

</head>

<body>
  <div class="flex-item-middle-gotani-background">
    <a class="status-error-code"> 404 </a><br>
    <a class="content-middle-message">
          We're Sorry, <br> The page you're looking is not found! <br><br>
      </a>
    <button class="button-previouspage" type="button" onclick="history.back()"> &lt; Go Back </button>

    <footer>
      <p>Here are a few links that may be helpful.</p>
      <p class="links">
        <a class="error-link-index" href="{% url 'index' %}">Home</a>
        <a class="error-link-aboutus" href="{% url 'about_us' %}">About Us</a>
        <a class="error-link-contactus" href="{% url 'contact_us' %}">Contact Us</a>
        <a class="error-link-signin" href="{% url 'login' %}">Sign In</a>
      </p>
    </footer>
  </div>
  </div>


</body>

CSS how to space between the elements and line-space vertically

1 Answers1