Having difficulty aligning divs in the center

My nested div is causing alignment issues and I can't seem to solve it. Despite trying various solutions like margin: 0 auto and setting a specific width, the centering problem persists. Can someone please help me identify the issue and provide a fix for it? Thank you!

 <div class="services-container">
        <h1 class="header-title banner">Services</h1>
        <div class="service-items">
            <div class="service-item">
                <span class="icon-box icon"></span><h2 class="service-title">Moving</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>
            <div class="service-item">
                 <span class="icon-box icon"></span><h2 class="service-title">Delivery</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>    
            <div class="service-item">
                <span class="icon-box icon"></span><h2 class="service-title">Accounting</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>    
            <div class="service-item">
                 <span class="icon-box icon"></span><h2 class="service-title">IT Services</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>
        </div>  
    </div>

CSS:

    div.services-container {
    margin-top: 1em;
    overflow:hidden;
    max-width: 100%;
    margin: 0 auto;
}

div.service-items {
    max-width: 1280px;
    overflow:hidden;
    margin: 0 auto;
}

div.service-item {
    border:1px solid black;
    width:45%;
    padding: 1em;
    margin:0 auto;
    float:left;
    text-align: center;
}
htmlcss

Answer №1

Swap out float:left; for display:inline-block;

Live demo here

div.items-list {
    background:#f0f0f0;
    max-width: 960px;
    overflow:hidden;
    margin: 0 auto;
    text-align: center; /* UPDATE */
}

div.item-card {
    border:1px solid #000;
    width:50%;
    padding: 10px;
    margin:0 auto;
    display:inline-block; /* UPDATE */
}

Answer №2

To resolve the alignment issue with the service-item divs, simply eliminate the float:left property and it will align centrally.

Answer №3

Eliminate the float:left property from the style of div.service-item

See it in action:http://jsfiddle.net/lotusgodkk/GCu2D/191/

CSS:

div.services-container {
      margin-top: 1em;
      overflow:hidden;
      max-width: 100%;
      margin: 0 auto;
  }
  div.service-items {
      max-width: 1280px;
      overflow:hidden;
      margin: 0 auto;
  }
  div.service-item {
      border:1px solid black;
      width:45%;
      padding: 1em;
      margin:0 auto;      
      text-align: 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

Spartacus 3.3 - Unleashing the Full Potential of the Default Sparta Storefront Theme

Looking for advice on how to customize the default Spartacus Storefront theme (Sparta) by only overriding specific CSS vars. Any suggestions? I tried following the instructions provided at: https://github.com/SAP/spartacus/blob/develop/projects/storefront ...

cssspartacus-storefront

Handling Errors in Node.js with Express

To access the complete repository for this project, visit: https://github.com/austindickey/FriendFinder After downloading the directory, follow the instructions in the ReadMe to set it up on your computer. Encountering an issue where my survey.html page ...

javascriptjqueryhtmlnode.jsexpress

Guidelines for organizing multiple checkboxes in a grid format

Hey there, I'm looking to create a 3x3 grid of checkboxes in a pop-up window. I found a similar example here: https://codepen.io/webdevjones/pen/qBapvrz. I tried using display: flex, but I'm unable to get the checkboxes in a grid format and the l ...

htmlcss

Why does my HTML file consistently prioritize the final instance of my two external style sheets when loading?

I am looking to implement Media Queries for Responsive Web Design. My goal is to have two distinct CSS files based on the browser width being either higher or lower than 900px. Here is how I included the external stylesheets: <link id="Min900" rel="st ...

htmlcssmedia-queries

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

Route parameters do not function correctly with computed properties

I'm facing an issue with my getter function that stores all products. When I try to retrieve a single product dynamically based on this.$route.params.id, it doesn't return any value. The code works fine when I navigate to a specific product, but ...

javascripthtmlvue.jsvuejs2vue-router

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

Disappearing White spaces in a Java Swing Label with HTML TagsIn a Java

I'm facing an issue where coloring one character in a string causes most of the whitespaces to disappear. I'm puzzled as to why this is happening and if there's a viable solution? map[9] = "# # ...

javahtmlswingjlabel

Swap out a div identifier and reload the page without a full page refresh

I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successf ...

javascriptjqueryhtmlcssajax

Out of nowhere, JavaScript/jQuery ceased to function

Everything was running smoothly on my website with jQuery Ui until I changed the color, and suddenly everything stopped working. Any ideas why this happened? I even tried writing the JavaScript within the HTML file and linking it as a separate .js file, bu ...

javascripthtml

Bizarre discrepancies in text wrapping across various browsers

After encountering a larger issue, I found that I could reduce it to a simpler scenario: To see the problem in action, check out this jsFiddle link: http://jsfiddle.net/uUGp6/ Here is the simplified HTML code: <div class="box"> <img class=" ...

htmlcssword-wrap

I am looking to modify the ID of the select element nested within a td tag

This is the code snippet I am working with: <tr> <td class="demo"> <label>nemo#2 Gender</label> <select id="custG2" required="required"> <option>....</option> <option>M</option> ...

javascriptjqueryajaxhtml

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

I have a list element (ul) that includes multiple list items (li), and each list item contains a form with an input type of file. How can I submit each form on the change event of the file selection? Below is the HTML code snippet: <ul> ...

javascriptjqueryhtmlajax

What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text? I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far: .review:: ...

htmlcss

How can we activate navigation on a mobile browser?

I am currently working on a small HTML5/JavaScript website designed to be accessed by mobile browsers on devices such as Android and iPhone. I am utilizing the geolocation feature of HTML5 to obtain the user's current location, but my goal is to then ...

javascriptandroidhtmlgoogle-mapsnavigation

When working with the <picture> element, only the first <source> is being utilized while the others are being disreg

When it comes to the img tag and the source tags, it simply switches between the first source tag based on the parameters provided. <picture> <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x700"> ...

htmlcss

Align the content inside a ul element using Bootstrap 4's justify feature

Hello, I am currently using Bootstrap 4 and have a question regarding the "justify-content-around" property. When there are more than three li elements, it works perfectly, but if there are less than three, it does not work. Any tips on how to fix this iss ...

cssbootstrap-4

Sending information to Bootstrap 4 modal

Can you help me insert the variable into this link? <a href="#edit_task" data-toggle="modal"><i class="fas fa-edit fa-lg fa-fw"></i></a> This is my modal: <div class="modal fade" id=" ...

javascriptphphtmljquerybootstrap-4

Use an if-else statement in jQuery with selectors to determine if a specific div element has been added to it

What if you have a main div and append one of these sub-divs to it? For example: <div class ="append"> <div id ="one"></div> <div id ="two"></div> </div> Then in jQuery, could you do something like this: if ($(.a ...

javascriptjqueryhtml

Is there a way to modify a component's CSS by using a global CSS class name in Angular?

We have implemented a system where a class on the html element determines whether the user is in dark or light mode of the application. <html class="dark-mode"></html> This class is dynamically added using Renderer2 in a service that detects ...

cssangularsassangular2viewencapsulation