What's causing the misalignment between the `<p>` and `<h3>` elements?

I have written some code which can also be found on JSFiddle:

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  line-height: 1.6;
}

.wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* No spacing to top and bottom, auto spacing to left and right */
  padding: 0 20px;
}

div {
  margin: 10px;
  padding: 10px;
}

h1 {
  font-size: 36px;
  text-align: center;
}

h3,
p {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-weight: 400;
  font-size: 24px;
}

p {
  font-weight: 300;
  text-align: justify;
  text-justify: auto;
}
<div class="wrapper">
  <div>
    <h1>Welcome! <span>I'm glad you're here.</span></h1>
    <h3>My name is Andrés-J. Cremades, and I'm an Interaction/UI Designer.</h3>
    <p>Usability obsessed interaction designer. Building a UX Designer career founded on strong technological knowledge. Creative and perfectionist by nature with a particular interest in graphic design and HCI with proven working team skills.
    </p>
  </div>
</div>

However, my issue is that the <p> and <h3> elements are not aligning vertically when the browser window is fully expanded.

I initially set a maximum text width of 80 characters and centered it for the <p> element with success:

p {
  font-weight: 300;
  max-width: 80ch;
  text-align: justify;
  text-justify: auto;
  margin-left: auto;
  margin-right: auto;
}

Subsequently, I wanted the <h3> element to align vertically with the new position of <p>, so I made adjustments to the code like this:

h3, p {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-weight: 400;
  font-size: 24px;
}

p {
  font-weight: 300;
  text-align: justify;
  text-justify: auto;
}

When attempting to set a margin-left value for <h3>, it worked as expected. However, why do the margin-left and margin-right values set to auto not work as seamlessly on <h3> as they do on <p>? Can someone help me understand what I might be doing wrong?

htmlcss

Answer №1

As noted by users @FabioManzano and @benvc in the comments beneath the question, the issue lies with this specific declaration:

max-width: 80ch;

80ch represents a font-relative length, leading to varying max-width values for different elements - impacting the results of margin-left: auto; and margin-right:auto;. [@benvc]

Although I aimed to restrict text line lengths to under 80 characters, I had to explore alternative methods to achieve this goal.

After consulting the recommendations outlined in an article, I decided to utilize px units instead of ch. This adjustment has effectively aligned the text vertically as shown below:

h3, p {
  max-width: 504px;
  margin-left: auto;
  margin-right: auto;
}

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

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

javascripthtmljquerycss

Why am I only able to send form data using the GET method and not the POST method?

I'm currently delving into the realm of html and php, but I seem to have hit a snag. When utilizing the GET method in my html form, parameters are successfully sent to my php file. However, when attempting the same with the POST method, no parameters ...

phphtmlforms

What distinguishes between employing a div versus a canvas element for a three.js display?

While it is commonly believed that three.js requires the HTML5 <canvas> element, I have found success in using a simple <div> by assigning height and width properties and then adding the WebGLRenderer.domElement as its child within the HTML str ...

javascripthtmlcssthree.js

Are you able to identify the contrast between my coding and the tutorial?

Can someone explain the differences between the code in my top navigation here and the one in this tutorial? Aside from changing the menu id name, I've used the same HTML and CSS. Oddly, the menu on my site is not visible; it seems to be hidden someh ...

cssmenubardrop-down-menu

Conceal the object, while revealing a void in its place

Is there a way to hide an image but keep the containing div blank with the same dimensions? I want it to appear as if no content was there, maintaining the original width and height. For example: http://jsfiddle.net/rJuWL/1/ After hiding, "Second!" appea ...

javascriptjquerycsshtml

Ensure text is neatly enclosed within bs4 containers

I'm encountering a significant issue with my bs4 boxes that I can't seem to resolve. The primary concern is that when the browser size falls between 600-767.98px and 768-991.98px (as per Dreamweaver), the text within the middle three boxes fails ...

htmlcssbootstrap-4

Change the color of the navbar after scrolling past 70% of the viewport height using

I'm exploring the idea of changing the color scheme of my navbar when it reaches 70% of the viewport height (vh). My current thought is to use an @media query to apply an invert filter to the nav container and logo. The syntax might look something li ...

htmlcssnavcss-filters

Submitting both $_POST[] data and $_FILES[] in a single AJAX request

Struggling with uploading images along with dates on my website. I am passing the date using $_POST and the image files in $_FILES. Here is the Javascript code snippet: (function post_image_content() { var input = document.getElementById("images"), ...

javascriptphpjqueryhtmlajax

It is not possible to make the event click work on the contents within a div

After conducting a sample chat, I am puzzled by the fact that the links or interactive buttons are not working within the content of the div. var ChatCompMap = new Map(); function ChatComponent(c, ident, userimg, username) { let id = c + '_&apo ...

javascriptjquerycss

Is it possible to override Bootstrap or not?

It's quite a puzzle to figure out when I can and cannot override Bootstrap classes or IDs with custom CSS. For instance, it seems easy enough to change the default navbar-dark background and font style, but altering the font color and size proves to ...

csssassbootstrap-4

Guide on storing user input data in an array

HTML: <span *ngFor="let cust of customs"> <div class="custominfobackground col-sm-12"> <input type="email" id="widget-subscribe-form-email" name="cust{{$index}}" class="form-control required email" [formControl]="form.controls[&apos ...

htmlarraysangular

In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element. <h1> <div id="vticker"><ul>...</ul></div> Some other headline text </h1> My goal is to have the vertica ...

javascriptjquerycssvticker

Viewing the html page from a virtual directory seems to be functional in Internet Explorer, but appears to be malfunctioning when accessed

localhost/rupeshwebsite/RJ.htm the URL functions properly in Internet Explorer. I am currently working on a Windows application using C#. The application is being developed as a general one, with scripts provided in a Notepad file for users to place in t ...

javascriptjqueryhtmlgoogle-chromefirefox

Using Jinja2's batch filter to extract the content from different div elements

In my project using flask and bootstrap 4, I implemented a batch filter to create a new row for every 3 items, as shown below: {% for row in teams|batch(3) %} <div class="row"> {% for value,participant in row %} <div class ...

htmlflaskbootstrap-4jinja2

Slanted lower edge - entire width

Can anyone provide guidance on how to design a div that is 100% width and 300px wide, with a slightly angled bottom border that spans the entire width of the box? https://i.sstatic.net/QSvoQ.png I am open to using either CSS or JavaScript for this task, ...

javascripthtmlcsscss-shapes

Constructing a string with specific formatting inside a For loop

I need assistance with formatting a string within my webform. Currently, I have a function that uses a for loop to output each item in my cart. However, I am struggling to include tab spaces and newline characters for better readability. Here is the code s ...

c#asp.netcss

Is there a way to extract text from a span element using selenium?

Below is my current code implementation: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC import time as t P ...

pythonhtmlpython-3.xseleniumselenium-webdriver

The border at the top of the table's header will be removed and the

I am trying to achieve a clean look with a solid blue line under my table header. However, the current styling on each th is causing little white separations in between each column. thead th { border-bottom: 4px solid #D3E6F5; padding-bottom: 20px ...

htmlcsscss-tables

Showing a div based on the selected value from a dropdown menu

I am currently working on a project where I have 3 separate div elements, each with a unique ID. Depending on the selected value from a dropdown menu, I want to display one of these divs. I have created a function to handle this logic, but for some reason, ...

javascripthtml

Guide to accessing the content within an h1 tag with JavaScript

I currently have a setup with 3 pages: 2 of them are WordPress pages while the other page is a custom page template featuring a form. The first two pages were created using the wp-job manager plugin. The first page includes a dropdown menu with a list of a ...

javascriptjqueryhtmlwordpress