Text not centered evenly on the page

My goal is to center my "Jumbotron" at the top, with my picture on the left and carousel on the right. However, all my content keeps floating to the left. Despite using Bootstrap 5 with flexbox, I can't seem to get everything centered properly.

Check out my code here

This is the HTML structure I am working with:

<section>
    <div class="hero">
        <div class="row" style="max-width: 1220px;">
            <div class="content text-center">
                <div class="value-prop text-center">
                    <h1 class="display-4">Hello, world!</h1>
                    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                    <hr class="my-4">
                    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                    <a class="btn btn-success btn-lg" href="#" role="button">Learn more</a>
                </div>
                <div class="hero-row d-flex">
                    <div class="hero-img-container d-flex text-center align-items-center" style="margin: 0 auto; width: 84%;">
                        <img style="max-width: 100%; height: auto;" src="../img/hp_hero_note@2x__en.png" height="800" />
                    </div>
                    <div class="carousel-container d-flex align-items-center" style="width: 16%; min-width: 240px;">
                        <div class="hero-carousel-texts slick-initialized slick-slider slick-dotted">
                            (carousel content goes here)
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

I would appreciate any tips on how to better master layouts in this context!

Answer №1

To achieve center alignment of the contents within the page, simply apply the mx-auto class to the first child element of div.hero. This will automatically set both margin-left and margin-right properties to auto.

<section>
    <div class="hero">
       <div class="row mx-auto" style="max-width: 1220px;">
...

Answer №2

Consider implementing this CSS code within the .hero section

flex-direction: row;
align-items: center;

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

Using webpack to load the css dependency of a requirejs module

Working with webpack and needing to incorporate libraries designed for requirejs has been smooth sailing so far. However, a bump in the road appeared when one of the libraries introduced a css dependency: define(["css!./stylesheet.css"], function(){ &bsol ...

The CSS border-radius feature shapes the corners without affecting the background

When I apply a 15px rounded border to a div, the border appears rounded on the outside but the corners where the border meets the background remain square. Here is an example: http://jsfiddle.net/BQT5F/1/ I tried using the background-clip property to add ...

"Utilizing jQuery to select elements for the purpose of preventing default

$('input[name=boxes], .item_add a ').on('click', function(e) { e.preventDefault(); //perform common actions } Is it possible to stop the default scrolling behavior when clicking on a link [.item add a], while still allowing the defa ...

Instructions for connecting my website's URL to a designated channel (button) on an external widget

My goal is to connect a channel from a third-party widget to my website through a URL link with a button. I want the channel to open directly under that specific URL. I attempted this method, but it seems to be ineffective: shareurexperience Animal "> ...

Changing the text in a Bootstrap tool-tip

Currently encountering an issue where I am attempting to modify the text displayed in a tooltip, but it appears that the change is not taking effect. Instead, upon hovering over, you will see the text "your new title." My goal is simply to alter the text w ...

Using javascript code to encode images to base64 and save the output to a text file

How can I modify the code below: <p id="demo"></p> <script> var openFile = function(event) { var input = event.target; var reader = new FileReader(); reader.onload = function(){ var dataURL = read ...

React.js Form Validation issue: When using input type "number", the text field remains a single value even after attempting to delete characters with the backspace key

Experiencing difficulty in clearing the input field value, even after pressing backspace the value remains constant. One particular value persists in the input field. import * as React from "react"; import { Button, Form } from "react-boots ...

What is the method for ensuring that the delete functionality is displayed within the same row?

In my division, there are options for names and deletion. It is displayed on my website as: 1.jpg delete The HTML code for the division is: <div id="files1" class="files"> <b class='dataname' >1.jpg</b> <span cla ...

Trouble displaying portrait images in CSS slideshow

My portfolio includes an image slider called wow slider, which can be found at You can view my site with the image slider on this page: http://jackmurdock.site50.net/StudioWork.hmtl While most of the galleries display portrait and landscape images correc ...

Explore the Filter List without being affected by the arrangement of words or the level of search precision

I was able to resolve the issue by adjusting my search filter algorithm. Now, I can search regardless of word order, but the results are not as specific as I need them to be. When I type "Correy" in the search bar, it shows all results containing that wo ...

Is it possible to include line breaks within a CSS value?

(I am posting this here because I couldn't find a solution and eventually figured it out through trial and error. Hopefully, this information can help others with the same question.) Note: This is not the same as the discussion on Single-line vs mult ...

Creating a bespoke scrollbar using Material UI

What is the best way to implement a custom scrollbar in Material UI? I have spent a lot of time researching how to add a custom scrollbar and I finally found a solution that works. Thanks to everyone who helped me along the way. ...

Revise the data model by using option IDs instead of option values in the selection dropdown

Just getting started with angular js and facing an issue. I have a json value that will determine the content of my html. Specifically, I need to populate a select dropdown with two options and have one automatically selected based on the flag provided in ...

Verifying that dynamically generated textboxes contain values

I am facing an issue with my code where I am generating dynamic IDs like checc1, checc2 for dynamically created textboxes. How can I assign these values to a variable called 'boxc' one by one? function GetDynamicTextBox(value) { var nextRowID ...

The children elements in the Flexbox div are not lined up inline with the text

Review the snippet below: div { display: flex; flex: 0 0 45%; max-width: 45%; } <div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut ...

Tips on creating a transition in React to showcase fresh HTML content depending on the recent state changes

I am completely new to React and recently completed a project called Random Quote Machine. The main objective was to have a method triggered inside React when the user clicks a button, changing the state value and re-rendering to display a new quote on the ...

Improve the performance of my website and resolve the zooming problem

Trying my hand at teaching myself jquery and creating a decent layout. I believe what I have done is acceptable, but I still have some questions. This is my first attempt at jquery without copying someone else's work. I've aimed to keep it relev ...

Is there a way to efficiently parse HTML data returned as JSON in the browser using Cordova/Ionic?

Currently, I am retrieving data from a Drupal service and using AngularJS along with the ionic framework to create a hybrid app for mobile platforms, leveraging Cordova or Phonegap. You can check out my code on codepen: http://codepen.io/BruceWhealtonSWE/p ...

jQuery function causing lag in speed

Is there a reason why this particular function is running so slowly? If no obvious issue is found, I may have to rule out jQuery as the culprit and focus on my CSS. $("#dialog-modal").dialog({ modal: true, autoOpen: false, resizable: false, ...

Error in THREE.js: The function material.onBeforeRender is not defined

Can someone assist me with an error I'm encountering while trying to run my code in Three.js? The error message reads as follows: three.js:19528 Uncaught TypeError: material.onBeforeRender is not a function at renderObject (three.js:19528) at ...