CODEWITHSUNDEEP
htmlcss
joel
joel

Reputation: 255

div "container" which does not center correctly

I would like to obtain this type of result

enter image description here

I have 2 problem that I don't know to solve.

The first problem is that, I would like to put my image towards the left. I think that float: left isn't the solution.

.about .about-img img {
    position: relative;
    width: 30%;
    float: left;   
}

The second problem is that, I wish center my titles Learn About Us and What we do correctly.

I have tried this:

.container{
    text-align: center;
}

I thank you in advance for your time and your help.

/*******************************/
/********** About CSS **********/
/*******************************/

.about {
    position: relative;
    width: 100%;
    padding: 45px 0;
  
}


.about .about-img img {
    position: relative;
    width: 30%;
   
    
}


.about .about-text p {
    font-size: 16px;
 
}

.about .about-text a.btn {
    position: relative;
    margin-top: 15px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #F7CAC9;
    background: #343148;
    border-radius: 0;
    transition: .3s;
}

.about .about-text a.btn:hover {
    color: #343148;
    background: #F7CAC9;
}



/*******************************/
/******* Section Header ********/
/*******************************/


.section-header {
    position: relative;
    margin: 0 auto;
    margin-bottom: 45px;
}

.section-header p {
    display: inline-block;
    margin: 0 30px;
    margin-bottom: 5px;
    padding: 0 10px;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    background: #ffffff;
}

.section-header p::after { /* les barres */ 
    position: absolute;
    content: "";
    height: 2px;
    top: 11px;
    right: -30px;
    left: -30px;
    background: #F7CAC9;
    z-index: -1;
}

.section-header h2 {
    margin: 0;
    position: relative;
    font-size: 40px;
    font-weight: 700;
}


/*******************************/
/********* Service CSS *********/
/*******************************/

.service {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.container{
    text-align: center;
}
<!-- About Start -->
      <div class="about">
        <div class="container">
          <div class="about-img">
            <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
          </div>
          <div class="section-header">
            <p>Learn About Us</p>
            <h2>Welcome to Yooga</h2>
          </div>
          <div class="about-text">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
            </p>
            <a class="btn" href="">Learn More</a>
          </div>
        </div>
      </div>
      <!-- About End -->
      <br />

      <!-- Service Start -->
      <div class="service">
        <div class="container">
          <div class="section-header">
            <p>What we do</p>
            <h2>Yoga For Health</h2>
          </div>
        </div>

      </div>
      <!-- Service End -->

Upvotes: 1

Views: 51

Answers (4)

Emanuel Christo
Emanuel Christo

Reputation: 36

You can use flexbox to align things easily.

Here is a beginner friendly guide to flexbox - CSS Tricks - A Complete Guide to Flexbox

You can use this code to get the desired results
NOTE: I have changed the markup a bit

    h2 {
      font-size: 2.5rem;
      color: rgb(28, 19, 37);
      margin: 0;
    }

    p {
      color: rgb(134, 134, 134);
      margin: 1rem 0;
      line-height: 1.5;
    }

    button {
      outline: none;
      border: none;
      border-radius: 0.25rem;
      background: rgb(28, 19, 37);
      color: #F7CAC9;
      font-size: 1rem;
      letter-spacing: 0.5px;
      text-decoration: none;
      padding: 1rem 1.5rem;
    }

    .container {
      display: flex;
      font-family: sans-serif;
      max-width: 1000px;
      margin: 2rem auto;
    }

    .container img {
      height: 350px;
      margin: 1rem;
    }

    .section-header p {
      position: relative;
    }

    .section-header p::after,
    .section-header p::before {
      position: absolute;
      content: "";
      height: 2px;
      width: 35px;
      background: #F7CAC9;
      z-index: -1;
    }

    .section-header p::after {
      top: 11px;
      margin: 0 10px;
    }

    .section-header p::before {
      top: 11px;
      margin-left: -45px;
    }

    .service .section-header {
      width: 100%;
      text-align: center;
    }
<div class="about">
    <div class="container">
      <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
      <div class="content">
        <div class="section-header">
          <p>Learn About Us</p>
          <h2>Welcome to Yooga</h2>
        </div>
        <div class="about-text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
            ornare
            velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
            ornare
            velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non
            nisl
            nec nisi scelerisque maximus.
          </p>
          <button>Learn More</button>
        </div>
      </div>
    </div>
  </div>
  <!-- About End -->
  <br />

  <!-- Service Start -->
  <div class="service">
    <div class="container">
      <div class="section-header">
        <p>What we do</p>
        <h2>Yoga For Health</h2>
      </div>
    </div>
  </div>

Upvotes: 2

pullidea-dev
pullidea-dev

Reputation: 1803

<style>
    .about {
        position: relative;
        width: 100%;
        padding: 45px 0;

    }

    .about .about-img img {
        position: relative;
        width: 100%;
    }


    .about .about-text p {
        font-size: 16px;
    }

    .about .about-text a.btn {
        position: relative;
        margin-top: 15px;
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #F7CAC9;
        background: #343148;
        border-radius: 0;
        transition: .3s;
    }

    .about .about-text a.btn:hover {
        color: #343148;
        background: #F7CAC9;
    }

    .about-text {
        text-align: left;
    }

    /*******************************/
    /******* Section Header ********/
    /*******************************/


    .section-header {
        position: relative;
        margin: 0 auto;
        margin-bottom: 45px;
        text-align: left;
    }

    .section-header p {
        display: inline-block;
        margin: 0 30px;
        margin-bottom: 5px;
        padding: 0 10px;
        position: relative;
        font-size: 16px;
        font-weight: 600;
        background: #ffffff;
    }

    .section-header p::after {
        /* les barres */
        position: absolute;
        content: "";
        height: 2px;
        top: 11px;
        right: -30px;
        left: -30px;
        background: #F7CAC9;
        z-index: -1;
    }

    .section-header h2 {
        margin: 0;
        position: relative;
        font-size: 40px;
        font-weight: 700;
    }


    /*******************************/
    /********* Service CSS *********/
    /*******************************/

    .service {
        position: relative;
        width: 100%;
        padding: 45px 0 15px 0;
    }

    .container {
        text-align: center;
        display: flex;
    }

    .about-img {
        flex: 0 0 42%;
    }
</style>

<!-- About Start -->
<div class="about">
    <div class="container">
        <div class="about-img">
            <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
        </div>
        <div>

            <div class="section-header">
                <p>Learn About Us</p>
                <h2>Welcome to Yooga</h2>
            </div>
            <div class="about-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur
                    facilisis
                    ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur
                    facilisis
                    ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
                    Curabitur non nisl nec nisi scelerisque maximus.
                </p>
                <a class="btn" href="">Learn More</a>
            </div>
        </div>
    </div>
</div>
<!-- About End -->
<br />

<!-- Service Start -->
<div class="service">
    <div class="container">
        <div class="section-header">
            <p>What we do</p>
            <h2>Yoga For Health</h2>
        </div>
    </div>

</div>
<!-- Service End -->

Upvotes: 1

NeNaD
NeNaD

Reputation: 20334

Can you check this:

/*******************************/
/********** About CSS **********/
/*******************************/

.about {
  display:flex;
  width: 100%;
  padding: 45px 0;
  flex-direction: row;
}

.about-img {
  width: 30%;
}

.about-image{
  width: 100%;
}

.about-container{
  width: 70%;
  padding-left: 30px;
}

.about .about-text p {
  font-size: 16px;

}

.about .about-text a.btn {
  position: relative;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F7CAC9;
  background: #343148;
  border-radius: 0;
  transition: .3s;
}

.about .about-text a.btn:hover {
  color: #343148;
  background: #F7CAC9;
}



/*******************************/
/******* Section Header ********/
/*******************************/


.section-header {
  position: relative;
  margin: 0 auto;
  margin-bottom: 45px;
  text-align:center;
}

.section-header p {
  display: inline-block;
  margin: 0 30px;
  margin-bottom: 5px;
  padding: 0 10px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  background: #ffffff;
}

.section-header p::after {
  /* les barres */
  position: absolute;
  content: "";
  height: 2px;
  top: 11px;
  right: -30px;
  left: -30px;
  background: #F7CAC9;
  z-index: -1;
}

.section-header h2 {
  margin: 0;
  position: relative;
  font-size: 40px;
  font-weight: 700;
}


/*******************************/
/********* Service CSS *********/
/*******************************/

.service {
  position: relative;
  width: 100%;
  padding: 45px 0 15px 0;
}

.container {
  text-align: center;
}
<!-- About Start -->
<div class="about">
  <div class="about-img">
    <img class="about-image" src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
  </div>
  <div class="about-container">
    <div class="section-header">
      <p>Learn About Us</p>
      <h2>Welcome to Yooga</h2>
    </div>
    <div class="about-text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
      </p>
      <a class="btn learn-more" href="">Learn More</a>
    </div>
  </div>
</div>
<!-- About End -->
<br />

<!-- Service Start -->
<div class="service">
  <div class="container">
    <div class="section-header">
      <p>What we do</p>
      <h2>Yoga For Health</h2>
    </div>
  </div>

</div>
<!-- Service End -->

Upvotes: 1

Andrew Hulterstrom
Andrew Hulterstrom

Reputation: 1725

You probably want to do something like this, using flexbox as Pedro suggested.

/*******************************/


/********** About CSS **********/


/*******************************/

.about {
  position: relative;
  width: 100%;
  padding: 45px 0;
}

.about .about-img {
  flex: 1 1 0px;
}

.about .about-img img {
  position: relative;
  width: 100%;
}

.about .about-text p {
  font-size: 16px;
}

.about .about-text a.btn {
  position: relative;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F7CAC9;
  background: #343148;
  border-radius: 0;
  transition: .3s;
}

.about .about-text a.btn:hover {
  color: #343148;
  background: #F7CAC9;
}


/*******************************/


/******* Section Header ********/


/*******************************/

.hero-text {
  flex: 1 1 0px;
}

.section-header {
  position: relative;
  margin: 0 auto;
  margin-bottom: 45px;
}

.section-header p {
  display: inline-block;
  margin: 0 30px;
  margin-bottom: 5px;
  padding: 0 10px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  background: #ffffff;
}

.section-header p::after {
  /* les barres */
  position: absolute;
  content: "";
  height: 2px;
  top: 11px;
  right: -30px;
  left: -30px;
  background: #F7CAC9;
  z-index: -1;
}

.section-header h2 {
  margin: 0;
  position: relative;
  font-size: 40px;
  font-weight: 700;
}


/*******************************/


/********* Service CSS *********/


/*******************************/

.service {
  position: relative;
  width: 100%;
  padding: 45px 0 15px 0;
}

.hero-container {
  max-width: 900px;
  text-align: center;
  display: flex;
}

.container {
  max-width: 900px;
  text-align: center;
}
<!-- About Start -->
<div class="about">
  <div class="hero-container">
    <div class="about-img">
      <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
    </div>
    <div class="hero-text">
      <div class="section-header">
        <p>Learn About Us</p>
        <h2>Welcome to Yooga</h2>
      </div>
      <div class="about-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
        </p>
        <a class="btn" href="">Learn More</a>
      </div>
    </div>
  </div>
</div>
<!-- About End -->
<br />

<!-- Service Start -->
<div class="service">
  <div class="container">
    <div class="section-header">
      <p>What we do</p>
      <h2>Yoga For Health</h2>
    </div>
    <div class="about-text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
      </p>
      <a class="btn" href="">Learn More</a>
    </div>
  </div>

</div>
<!-- Service End -->

Upvotes: 2

Related Questions