How come my initial heading isn't aligned in the middle like the subsequent one?

I am having trouble centering my title Learn About Us correctly, similar to the title What we do. It seems there is an issue with the alignment of the picture, and I'm not sure how to fix it.

https://i.sstatic.net/grWdK.png

I need help understanding how to center titles like in this example:

As shown here, the titles are properly aligned.

https://i.sstatic.net/5j4Z1.png

Thank you in advance for your assistance and time.

    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>

htmlcss

Answer №1

Adjusting the -45px margin-left in .section-header p::before requires a corresponding +45px margin-left in .content .section-header p to offset the impact.

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;
}

.content .section-header p{
  margin-left: 45px;
}

.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 Yoga</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting the toggleClass function to work properly?

I'm facing an issue with some straightforward code that I've written. $(function() { $("#tren").click(function() { $("#trens").toggleClass("show"); }); }); .show { color: "red"; } <ul> <li id="tren">Some text</li> < ...

javascriptjqueryhtmltoggleclass

Cannot get the input padding override to work in MUI autocomplete

I've been attempting to modify the padding within the MUI autocomplete component, but unfortunately, it doesn't appear to be functioning correctly const icon = <CheckBoxOutlineBlankIcon fontSize="small" />; const checkedIcon = ...

htmlcssreactjsmaterial-uiautocomplete

CSS - Resizing Images

I am experiencing an issue with the width of an image on my website. I want it to span 100% of the browser frame, but it is currently limited to only 1000px wide. Please take a look at: The image in question is located at the top of the page. Is there a ...

cssimagewidth

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve. The structure of my grid is as follows: https://i.sstatic.net/TEU2a.png My goal is to ensure that each section inside t ...

javascriptcssreactjswebmaterial-ui

__str__ method not displaying the string properly

I'm currently developing a Django application and I'm working on displaying the first and last names of the user upon login. This is a snippet of my model - class Admins(models.Model): user = models.OneToOneField(User, on_delete=models.CASCA ...

pythonhtmldjangodjango-modelsdjango-views

Tips on anchoring a footer to the bottom of a webpage following a loop in PHP

After running a PHP file with some HTML, I noticed that the footer is not staying at the bottom of the page as intended. It seems to be overlapping with the products or leaving empty space after them due to changes in the DOM. If anyone has insight on how ...

phphtmlcsswhile-loopfooter

Ways to arrange specific columns within a table

I am facing an issue with aligning text in a table properly. In my table, I have two columns - first column and second column, both with colspan="4": It is supposed to look like this: <tr> <td colspan="4"> First column </td> ...

htmlcsshtml-table

Achieve a full height for children without the need to specify a fixed height for the

I'm currently working on a container div that houses two child divs: the first one, positioned to align with its parent's left border, contains a series of buttons while the second one holds the main content. In essence, it operates like a tab na ...

htmlcssheight

How to display an [object HTMLElement] using Angular

Imagine you have a dynamically created variable in HTML and you want to print it out with the new HTML syntax. However, you are unsure of how to do so. If you tried printing the variable directly in the HTML, it would simply display as text. This is the ...

javascripthtmlangulartypescriptcomponents

Issue with div element not functioning properly within table declaration on Internet Explorer

There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...

javascriptcsshtml-table

I am experiencing issues with my three.js script not functioning properly within the context of a

I have been working on implementing a raycaster function in my project that only activates when an entity is visible. To achieve this, I was advised to create a custom script for better control. I have set up all entities and their child entities to be in ...

javascripthtmlthree.jsaframe

Crafting a horizontal sub-menu that sits between the parent element and the company logo

Seeking assistance with designing a navigation menu that places the navigation bar above the site logo. I envision the sub-menu expanding horizontally from the navigation bar and positioning itself between the parent navigation bar and the logo. The sub- ...

htmlcssweb

Receive information from a form and store it in an array

Struggling to figure out how to convert this into an array. I'm having trouble grasping the concept of taking input from a form and storing it in an array. In my project instructions, it clearly states: Do NOT save the input in variables and then tra ...

javascripthtmlarrays

Revealing CSS elements moving from the left to the right

On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hi ...

jqueryhtmlcss

Unexpected problem with redrawing HTML application in Android WebView

I created a basic nixie clock app using HTML and wrapped it in a WebView for use on Android. It consists of one HTML file, a JS file, a CSS file, and ten digit images. After a few hours, I noticed stripes appearing in the center of the screen where the an ...

androidhtmlcsswebviewdrawable

Guidelines for inputting a value into a JavaScript list and choosing a specific item within the list

When it comes to studying Selenium Web, I rely on the website. My current challenge involves inputting 'Ottawa' into the location control and then selecting 'Ottawa, ON'. WebElement el = driver.findElement( By.xpath("//*[contains( ...

javascripthtmlselenium-webdriver

Issue with menu display on Internet Explorer

Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...

phphtmlcss

Guide on creating a square within an element using JavaScript

After conducting thorough research, I find myself unsure of the best course of action. My situation involves a Kendo Grid (table) with 3 rows and 3 columns. Initially, the table displays only the first column, populated upon the page's initial load. S ...

javascripthtmlcssasp.netkendo-ui

Make sure your website design is responsive by setting the body to the device's

https://i.sstatic.net/3xHcx.png I'm struggling to make the body of my page responsive for mobile users. Whenever I try using this line of code, it just creates a messy layout. Any advice on how to fix this? <meta name="viewport" cont ...

htmlcss

Utilizing CURL for PHP to extract information from any webpage

Can a PHP function be created to generate an HTML string of any link like a browser does? For example, links such as "", "", "mywebsite.com", "somesite.com/.page/nn/?s=b#85452", "lichess.org" What I have attempted: $curl = curl_init(); curl_setopt($curl, ...

phphtmlparsingcurl