how do I move the third h3 element to the left?-CodePudding

I tried using an id label to the third h3 element "Tri-Motor Cybertruck" to move it a bit to the left so it is kind of centered above the text below it. But that didn't work. I don't know what else I can do to solve this problem. I've googled around for a solution but didn't find anything.

#demo {
  padding-top: 85px;
}

section ul {
  display: flex;
  flex-direction: column;
}

#pricing {
  display: flex;
  position: relative;
  left: 20px;
  padding-bottom: 50px;
}

#pricing h3 {
  position: relative;
  bottom: 50px;
  left: 220px;
  padding-left: 20px;
}

#tri-motor-cybertruck {
  position: relative;
  right: 100px;
}

<section id="demo">
  <iframe id="video" src="https://www.youtube.com/embed/m7atGkba-Z8" allowfullscreen></iframe>
</section>

<section id="pricing">
  <h3>Single-Motor Cybertruck</h3>
  <ul>
    <li>$39,900</li>
    <li>250  miles of range</li>
    <li>0-60 moh in 6.5 seconds</li>
    <li>top speed of 110 mph</li>
  </ul>
  <h3>Dual-Motor Cybertruck</h3>
  <ul>
    <li>$49,900</li>
    <li>300  miles of range</li>
    <li>0-60 moh in 4.5 seconds</li>
    <li>top speed of 120 mph</li>
  </ul>
  <h3 id="tri-motor-cybertruck">Tri-Motor Cybertruck</h3>
  <ul>
    <li>$69,900</li>
    <li>500  miles of range</li>
    <li>0-60 moh in 2.9 seconds</li>
    <li>top speed of 130 mph</li>
  </ul>
</section>

CodePudding user response：

I'd say your code can be simplified. I added a container and nested each of your h3's and ul's in divs, and added a simple flex layout on your container with a gap on your other flex parent #pricing.

#demo {
padding-top: 85px;
}

section ~ ul {
display: flex;
flex-direction: column;
}

#pricing {
display: flex;
gap: 50px;
}

<section id="container">
<section id="demo">
 <iframe id="video" src="https://www.youtube.com/embed/m7atGkba-Z8" allowfullscreen></iframe>
</section> 

<section id="pricing">
<div>
 <h3>Single-Motor Cybertruck</h3>
 <ul>
   <li>$39,900</li>
   <li>250  miles of range</li>
   <li>0-60 moh in 6.5 seconds</li>
   <li>top speed of 110 mph</li>
 </ul>
</div>
<div>
 <h3>Dual-Motor Cybertruck</h3>
 <ul>
  <li>$49,900</li>
  <li>300  miles of range</li>
  <li>0-60 moh in 4.5 seconds</li>
  <li>top speed of 120 mph</li>
 </ul>
</div>
<div>
 <h3 id="tri-motor-cybertruck">Tri-Motor Cybertruck</h3>
 <ul>
  <li>$69,900</li>
  <li>500  miles of range</li>
  <li>0-60 moh in 2.9 seconds</li>
  <li>top speed of 130 mph</li>
 </ul>
</div>

 </section>
 </section>

CodePudding user response：

use this

    #pricing #tri-motor-cybertruck {
            left: 200px;
    }

instead of

    #tri-motor-cybertruck {
      position: relative;
      right: 100px;
    }

your problem was related with this theme Specificity