Struggling to align a column within a container in HTML CSS, issues with CSS not functioning as expected

I have been attempting to vertically center the column within a container, but it keeps aligning to the left. Despite trying numerous CSS properties, I can't seem to get it right. Shrinking the width of the paragraph container to 650px or 70% doesn't work as expected, as it still shifts leftward. Any suggestions on what I might be doing incorrectly?

   <letstalk>
<div className="container">
  <div className="row">
     <h1>Escape is not his plan.
       I must face him, alone.</h1>
       <div className="col">
      <p className="textcontent"> As you wish. I can't get involved! I've got work to do! 
        It's not that I like the Empire, I hate it, but there's nothing 
        I can do about it right now. It's such a long way from here. Alderaan? 
        I'm not going to Alderaan.
        I've got to go home. It's late, I'm in for it as it is.</p>
        </div>
      <button type="button" class="btn btn-primary">Let's Talk</button>
  </div>
</div>

//css

letstalk {
 height: auto;
 background: #2D2828;
 display: flex;
 justify-content: center;
 color: white;
 padding: 50px;
 .container{
     justify-content: center;
     text-align: center;
      }
      .textcontent {
          max-width: 650px;
      }

}

Check out the screen here.

I am struggling to center the paragraph instead of having it aligned to the left side. Even setting the width to 60% or 650px does not seem to work, particularly for that paragraph. Would appreciate any help in figuring out where I went wrong.

Answer №1

make sure to include margin:0 auto; within this particular class

.content {
          max-width: 800px;
          margin:0 auto;
 }

.content

Answer №2

When display: block is present with no impact on the parent block, use margin: 0 auto. Otherwise, apply

display: flex; justify-content: center
to the parent block.

Answer №3

increase the margin by 5 pixels

.textcontent {
      max-width: 650px;
      margin: 5px 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

Tips for invoking the href function in jwplayer with individual arguments

I need assistance with configuring jwplayer to load a list of href links one by one. Each href link includes a function that needs to be triggered automatically with specific parameters passed to JavaScript. Below is the code snippet I am currently worki ...

What is the best way to animate my logo using JavaScript so that it scales smoothly just like an image logo

I dedicated a significant amount of time to create a unique and eye-catching logo animation for my website! The logo animation I designed perfectly matches the size of the logo image and can be seamlessly integrated into the site. The issue arises when th ...

Guide on utilizing getelementsbytagname for retrieving LI values

As I attempt to locate a specific product on amazon.com, my goal is to extract the ASIN for each item. This particular code snippet runs through various search options and retrieves the price of each product from Amazon one by one. However, in addition to ...

Identifying Oversized Files on Safari Mobile: A Guide to Detecting Ignored Large Files in

Mobile browsers such as Safari have a tendency to ignore large files when passed in through the <input type="file">. For example, testing with a 10mb image file results in no trigger of any events - no change, no error, nothing. The user action is si ...

The AJAX data variable fails to send to PHP script although $_POST is defined

I am at my wit's end with this problem. I am attempting to send a variable to a PHP script using AJAX, and although I can confirm that $_POST is set, the variable remains undefined. Oddly enough, I have used almost the same code in other instances an ...

retrieving or submitting information using jquery and displaying the URL in the browser's address bar

So, I have a deadline looming tomorrow morning.. I'm currently working with jQuery, trying to load data from an external file. What I really need help with is figuring out how to load new data when I use $.post or $.get in jQuery. Sending a request ...

What is the best way to dynamically swap out an image within an element?

Is there a way to dynamically replace this image without deleting the HTML SVG element and re-rendering it? xlink:href="http://missosology.info/forum/download/file.php?avatar=11666_1307312313.jpg" CODE: https://jsfiddle.net/bfv17f0e/ <svg class="clip ...

What method can I use to locate the double quote option within an HTML select element using jQuery?

Here is an example of the select: <select id="id0" name="name0"> <option value='30" size'> 30" size </option> </select> The select contains double quotes. I am trying ...

Transitioning from Webpack version 4 to version 5 resulted in a failure to detect certain styles

After migrating my React project to Webpack v5, I am facing an issue where none of my .scss files are being picked up when I run the project. I meticulously followed the guide on migrating webpack https://webpack.js.org/migrate/5/, updated all plugins and ...

"Bringing the power of JavaScript to your WordPress

I have set up a wordpress page and integrated some JavaScript into it. When working in wordpress, there are two tabs on a page where you can input text - 'Visual' and 'Text'. The 'Text' tab is used for adding HTML and scripts ...

Issue with ng2 pdf-viewer: Text becomes less visible as you zoom in

This custom implementation includes a zoom-in and zoom-out feature. When clicking on zoom in, the value of [zoom] increases by 0.25, and when clicking zoom out, the value decreases by 0.25. The PDF container div has a width of col-md-6 and a maximum heigh ...

Utilize a dynamic approach to add the active class to navigation list items

My files all have a header that includes a navigation bar. I am trying to use jQuery to add the 'active' class to the relevant list items (li). The method I initially thought of involved setting a variable on each page, assigning an ID equal to ...

How can a bootstrap gallery maintain a consistent size despite variations in picture dimensions?

I am currently working on creating an image gallery for our website using the latest version of Bootstrap. However, we are facing an issue with the varying sizes of our images. Each time the gallery switches to a new image, it disrupts the overall size and ...

Navigating the browser view across an extensive HTML page without relying on scrollbars

I have a large HTML page (approximately 7000x5000) and I need to be able to move the user's view around with JavaScript. Disabling the ability for the user to scroll by hiding the browser scrollbars using overflow:hidden on the HTML element is easy. ...

Tips for positioning text underneath an image with HTML and CSS

I'm attempting to align two links below an image as text. The HTML I have works perfectly in Chrome and Firefox, but not in IE, where 90% of our internal users are. Here is the code: <div style="float: right;"><img src="sites/default/files/ ...

Issues with Jquery Div sliding transitions from right to left are not functioning correctly

Creating page transitions in jQuery similar to "http://support.microsoft.com/." Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) ...

"Challenges in styling a table within a div: the text fails to adhere to the

I am struggling to identify the source of a problem in my code. The issue seems to be related to the padding within the parent div, specifically with the text "1 Healthy Midday Meal for One Child Overseas" and how it is ignoring the 5px right padding. Upon ...

How can you confirm the validity of a dropdown menu using JavaScript?

<FORM NAME="form1" METHOD="POST" ACTION="survey.php"> <P>q1: How would you rate the performance of John Doe? <P> <INPUT TYPE='Radio' Name='q1' value='1' id='q1'>1 ...

Retrieving PHP variables within the HTML document of the current page

Suppose I have a page with a link <a href='edit_info.php?id=1001'>1001</a>. In the edit_info.php page, I want to use this id to query a database, like so: SELECT * FROM table WHERE id = $_GET['id'] Now, I need to populate ...

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Sorry for the unusual question, but it was the best way I could think of asking. I have come across websites with fill-in-the-blank lines where you can input your desired information and then get redirected to another page. For example: "What are you sea ...