Question 396552 in Html Question posted in
Some basic documentation can be found here.

Centering all my content in straight line vertically in a website using html and css only

This is the original image where i am trying to replicate it
This what i have made so far
the question how do i align all my content in vertical straight line as in the original picture.

if you compare what i have made you can see the nav bar and other contents all over the place. please i need my content exactly like the original one. this the code for the website my website
HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Softing-Software Landing Page WordPress Theme Preview - ThemeForest
    </title>
    <link rel="stylesheet" href="front.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <header>
      <div class="container">
        <div class="image">
          <div class="image1">
            <img src="logo-1.png" width="150px" height="50px" />
          </div>
        </div>
        <div>
          <nav style="display: flex">
            <ul class="header-text">
              <li><button class="btn-1">HOME</button></li>
              <li><button class="btn-1">SERVICES</button></li>
              <li><button class="btn-1">ABOUT</button></li>
              <li><button class="btn-1">PRICING</button></li>
              <li><button class="btn-1">TEAM</button></li>
              <li><button class="btn-1">PAGES</button></li>
              <li><button class="btn-1">CONTACT</button></li>
            </ul>
            <button
              style="
                border: none;
                border-radius: 20px;
                padding: 10px 20px;
                background-color: aqua;
                color: aliceblue;
                font-family: sans-serif;
              "
            >
              LOGIN
            </button>
          </nav>
        </div>
      </div>
    </header>
    <div class="section1">
      <div class="sub-section1">
        <h1>We're Building <span style="color: #4ac4f3">Software</span></h1>
        <h1 style="margin-bottom: 20px">For You</h1>
        <p style="margin-bottom: 30px">
          Celebrated delightful an especially increasing instrument am.
          Indulgence<br />contrasted sufficient to unpleasant in in insensible
          favourable. Latter<br />
          remark hunted vulgar say man.sitting hearted on it without me.
        </p>
        <div class="sub-section2">
          <button
            style="
              width: 180px;
              border-radius: 20px;
              border: 2px solid #4ac4f3;
              height: 47px;
              margin-top: 10px;
              background-color: #edf5ff;
              color: #4ac4f3;
              font-weight: 900;
              font-family: Poppins, sans-serif;
            "
          >
            GET STARTED
          </button>
          <img
            style="height: 60px; margin-left: 20px"
            src="circle-play-solid.svg"
          />
        </div>
      </div>
      <div class="sub-section3">
        <img style="height: 500px; width: 500px" src="app-4.png" />
      </div>
    </div>
    <div class="section2">
      <div class="super-section">
        <div class="sub-section4">
          <h4>STORY ABOUT US</h4>
          <h2>
            Create your app page <br />
            with expert developer
          </h2>
          <p>
            Both rest of know draw fond post as. It agreement defective to
            excellent.<br />
            Feebly do engage of narrow. Extensive repulsive belonging depending
            if promotion be zealously as.<br />
            Preference inquietude ask now are dispatched led appearance. Small
            meant in so doubt<br />
            hopes.
          </p>
          <button class="btn-2">READ MORE</button>
          <hr />
        </div>
        <div class="sub-section5">
          <h3>Why Choose Us</h3>
          <div class="heading1">
            <img class="circle1" src="circle-check-solid.svg" />
            <span class="note">Elderly Is Detract Tedious Assured Private</span>
          </div>
          <div class="heading1">
            <img class="circle1" src="circle-check-solid.svg" />
            <span class="note">Do Travelling Companions Contrasted</span>
          </div>
          <div class="heading1">
            <img class="circle1" src="circle-check-solid.svg" />
            <span class="note">Mistress Strongly Remember Up</span>
          </div>
          <div class="heading1">
            <img class="circle1" src="circle-check-solid.svg" />
            <span class="note">Branched Is On An Ecstatic Directly It</span>
          </div>
        </div>
      </div>

      <div class="sub-section6">
        <div style="color: white;" class="grid">
          <img class="icon" src="ticket-solid.svg">
          <span class="sub-heading">Ticket Manage</span>
          <p class="para">
            Downs those still witty<br />
            an balls so chief so. Moment an little<br />
            remain no lively
          </p>
        </div>
        <div style="background-color: white;" class="grid">
          <img class="icon" src="comments-regular.svg">
          <span class="sub-heading">Live Messaging</span>
          <p class="para">
            Downs those still witty<br />
            an balls so chief so. Moment an little<br />
            remain no lively
          </p>
        </div>
        <div style="background-color: white;" class="grid">
          <img class="icon" src="envelope-open-text-solid.svg">
          <span class="sub-heading">Email Workflow</span>
          <p class="para">
            Downs those still witty<br />
            an balls so chief so. Moment an little<br />
            remain no lively
          </p>
        </div>
        <div style="color: white;" class="grid">
          <img class="icon" src="file-arrow-up-solid.svg">
          <span class="sub-heading">File Upload</span>
          <p class="para">
            Downs those still witty<br />
            an balls so chief so. Moment an little<br />
            remain no lively
          </p>
        </div>
      </div>
    </div>
    <div class="section3">
<div class="sub-section7">
  <span class="company">Trusted By The World's Best<br> Companies</span>
  <p class="para1">Seeing rather her you not esteem men settle genius<br> excuse. Deal say over you age from. Comparison new<br> ham melancholy son themselves.</p>
</div>
<div class="sub-section8">
<img src="cupid love.png">
<img src="zayaka.png">
<img src="car.png">
</div>
    </div>
    <footer>
      <div class="section4">
        <div class="sub-section9">
          <img class="copyright" src="copyright-solid.svg">
          <p> Copyright 2019. All Rights Reserved By <span style="color: #4ac4f3;">Ninetheme</span></p>
        </div>
        <div class="sub-section10">
          <span> TERMS OF USER | LICENSE | SUPPORT</span>
        </div>
      </div>
    </footer>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  /* box-sizing: border-box; */
  height: auto;
  
  display: flex;
 flex-direction: column;
 align-items: center;
}
.container {
  display: flex;
  justify-content: center;
  background-color: white;
  /* padding: 40px; */
  height: 100px;
  flex-direction: row;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  
}

.header-text {
  width: 600px;
  background-color: white;
  justify-content: space-around;
  align-items: center;
  margin-left: 400px;
  list-style: none;
  display: flex;
}
.header-text span {
  margin-right: 40px;
  font-family: sans-serif;
  font-weight: 400;
}
.btn-1 {
  border: none;
  background-color: white;
}
.image1 {
  margin-left: 30px;

  height: 100%;
  background-color: white;
}
.section1 {
  background-color: #edf5ff;
  background-image: url("waves-shape.svg");
  width: 100vw;
  height: 600px;
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.sub-section1 {
  display: flex;
  flex-direction: column;
}
.sub-section2 {
  display: flex;
  flex-direction: row;
}
h1 {
  font-family: "Poppins", sans-serif;
}
p {
  font-family: "Open Sans", sans-serif;
}
.section2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
}
.sub-section4 {
  display: flex;
  flex-direction: column;
  
  width: 100%;
}
.super-section {
  margin-right: 50px;
  
}
h4 {
  font-family: "Poppins", sans-serif;
  color: #4ac4f3;
}
h2 {
  font-family: "Poppins", sans-serif;
}
.btn-2 {
  height: 50px;
  width: 190px;
  border-radius: 30px;
  border: none;
  background-color: #4ac4f3;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
}
hr {
  width: 100%;
}
.sub-section5 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 35px;

}
.heading1 {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.circle1 {
  height: 20px;
}
.note {
  color: #666;
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
}
h3 {
  font-size: 24px;
  font-family: "Poppins", sans-serif;
}
.sub-section6 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 35%;
  
  flex-wrap: wrap;
  margin-top: 90px;
}
.grid {
  width: 45%;
  background-color: #4ac4f3;
  border: none;
  margin-bottom: 25px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 1px 1px 5px black;
}
.icon {
  width: 40%;
  height: 30%;
}
.sub-heading {
  font-family: "Poppins", sans-serif;
  font-weight: bold;
}
.para {
  font-family: "Open Sans", sans-serif;
}
.section3 {
  background-color: #edf5ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 80%;
}
.sub-section7 {
  display: flex;
  flex-direction: column;
}
.company {
  margin-top: 50px;
  font-family: "Poppins", sans-serif;
  font-weight: bolder;
  font-size: large;
}
.para1 {
  font-family: "Open Sans", sans-serif;
  color: #232323;
  line-height: 26px;
  margin: 0 0 15px;
  font-weight: 400;
  margin-top: 10px;
}
.section4 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 125px;
}
.sub-section9 {
  display: flex;
  flex-direction: row;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
}
.copyright {
  width: 15px;
  margin-right: 5px;
}
.sub-section10 {
  color: #999;
  display: inline-block;
  font-weight: 400;
  margin-left: 10px;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
}
Tags:

2

Answers


  1. 0

    Set width: 100% to all elements so that they utilize full screen width and after that add margin: 0 20% which will add 20% margin to right & left.

    Applying this changes will solve your issue but remember to remove properties like absolute, top & all.

    Still your issue is not fixed add comment to this answer, Thanks.

    Login or Signup to reply.
  2. 0

    Sorry, I’m not quite sure what you want to do. I guess you want this. Am I right?

    .section2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* flex-wrap: wrap;  */
    width: 80%;

    >* {
        width: 50%;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search