Struggling to achieve consistent spacing for margins on a website

I've arranged three boxes/containers in a row on my webpage.

The first box, the blue one, is 2px away from the left edge of the browser while the last box, the purple one, is also positioned 2px away according to the inspect element tool.

View image of the boxes

However, when viewing the webpage, the spacing appears uneven:

Check out the live page here

I've studied the box-model thoroughly but I still can't manage to achieve equal spacing despite setting a 2px margin on both sides.

Please provide guidance on what might be causing this issue. The .call-outs-container serves as the parent container, with .call-out being the child, applied to these divs:

#

amendment

complete code below

# 
<!doctype html>
<html>
    <head>
        <title>James' page!</title>

        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

    hr {height:1px; border:none; color:#000; background-color:#000;}

        a {
            text-decoration: none;
        }


        a:hover {
            text-decoration: underline;
        }

        a:visited{
            color:green;
        }

        body { margin: 0;}

           .ClearFloat {  
                clear: both;  
            }  

            .call-outs-container 
            {
                max-width: 2000px; 
                margin: 1px 1px 1px 1px 
            }

            .call-out {

                padding: 5px;
                margin-left: 2px; margin-top: 40px; margin-right: 2px;        margin-bottom: -5px;;
                width:30%;
                float:left;
            }

            .call-out:nth-child(1) {background-color: #c0dbe2;}
            .call-out:nth-child(2) {background-color: #cdf1c3;}
            .call-out:nth-child(3) {background-color: #ccb9da;}
            .call-out:nth-child(5) {background-color: #c0dbe2;}

            .box{
                 border:10px solid #CC3F85;
                 width:400px;
                 margin: 0 auto;
                 padding: 20px;
             }

    </style>


    </head>

    <body>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/NkyEOrQiGMQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"  allowfullscreen target = "test1"></iframe>

 <div class="call-outs-container">
            <div class="call-out">
                <h4>Feature1</h4>
                <p> hello</p>
            </div>

      <div class="call-out">
          <h4>Feature2</h4>
           <p><a href="http://www.youtube.com/watch?v=K2wFsu_O490">Nanking</a></p>
           <p><a href="http://www.youtube.com/watch?v=K2wFsu_O490" target="_blank">new tab</a></p>
      </div>

        <div class="call-out">
            <h4>Feature3</h4>
            I am interested in history.
        </div>

        <div class = "ClearFloat"></div>

        <div class="call-out">
            <h1>James's page!</h1>
       </div>
</div>

<div class = "ClearFloat"></div>

<h2>A few facts about me</h2>

<img src="me.jpeg" width="400">

<p>I like web design.</p>
</body>
</html>
htmlcss

Answer №1

div{
text-align:center;}
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;

  padding: 50px;
  margin: 20px;
  
  float: right;
  
}
</style>
</head>
<body>

<div>Welcome Page</div>

<div>Welcome Page2</div>

</body>
</html>

Answer №2

If you're looking for a solution to easily control elements, I would suggest utilizing flexbox instead of using float.

  1. To begin, ensure you include display: flex in the .call-outs-container class.
  2. Then, indicate that the items should evenly fill the axis by adding flex: 1 1 0 to the .call-out class.

.call-outs-container {
  display: flex;
}

.call-out {
  padding: 5px;
  margin-right: 2px;
  flex: 1 1 0;
}

.call-out:nth-child(1) {
  background-color: #c0dbe2;
}

.call-out:nth-child(2) {
  background-color: #cdf1c3;
}

.call-out:nth-child(3) {
  background-color: #ccb9da;
}
<div class="call-outs-container">
  <div class="call-out">
    <h4>Feature1</h4>
    <p> hello</p>
  </div>
  <div class="call-out">
    <h4>Nanking</h4>
    new tab
  </div>
  <div class="call-out">
    <h4>Feature3</h4>
    I am interested in history.
  </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

The Ajax load() function is malfunctioning

.load() will only function properly when the files are coming from a server, so I anticipate that it will work later once I have it hosted on a server Edit: This code is functional in Firefox but not in Chrome I've been attempting to apply ajax to l ...

htmlajaxload

How can I establish a backup plan for an image with transparency?

I currently have a dilemma with using a 20px fallback image for loading images. Transparent images seem to appear blurry once they are loaded due to the background image. The use of dominant color or traced SVG does not solve this issue either. How can I i ...

javascriptcssimagebackgroundbackground-image

Apexchart abandons the wrapper upon adding dual Y-Axes

When attempting to add two Y-Axes to an Apexchart, it seems to extend beyond the wrapper and fails to resize correctly. My goal is to display one Y-Axis on the left side of the chart and another on the right. I attempted to troubleshoot using my dev tool ...

javascripthtmlapexcharts

Utilize Express.js to load a random HTML page

Hey there, it's Nimit! I could really use some assistance with my code. I'm trying to figure out if it's possible to load different HTML pages on the same URL like www.xyz.com/home/random. Can more than one HTML page be randomly loaded? I ...

javascripthtmlexpress

Executing a jQuery function in vb.net codeBy utilizing vb.net, the jQuery

Encountering an unusual issue where I need to toggle the visibility of a div both server side and client side without being able to change it to a panel. To achieve this, I am currently using the following code to toggle its visibility client side: $(&ap ...

javascriptjqueryhtmlasp.netvb.net

Display a dynamic variable within React's HTML code

const fetchTime = () => { const currentDate = new Date(); const currentTime = currentDate + ' ' + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); return {currentTime}; } export default fun ...

javascripthtmlreactjs

Guide to creating a dynamic column layout with minimum height divs

I am facing an issue with the variable height of my div, causing it to position incorrectly. To demonstrate the problem, I have included a code snippet below. Here is the solution I am seeking: https://i.sstatic.net/XMAMr.png Note: Since the div has a ...

htmlcssresponsive-design

Implement a commenting feature upon the button being clicked

When a button is clicked, I want to insert some HTML code onto my page. Here's the code that I wish to add: <form action="#" id="Reactie_form"> <input id="Form_voornaam" type="text" placehol ...

javascripthtmlcssvue.js

How can I place a submit button on a separate line using CSS?

Is there a way to position an input type=submit below a text area without relying on br tags or div elements? I'd prefer a solution using CSS. ...

cssinputnewlinesubmit

A method for displaying a message to the user within an input div based on a database value using an if statement

Having some trouble with this code, can anyone offer assistance? The v_central_locking value should be either 0 or 1. Here is the code snippet to display the value fetched from the database: <?php <!--box start--> ...

phphtmlmysqlif-statement

Unable to assign an attribute to an HTML element without a value ('hidden')

In my quest to dynamically toggle the hidden attribute on certain HTML elements, I have come up with the following code snippet: <li><a href="#" onclick="SelectImage( 5 ); return false;">6</a></li> ... <a href="/image/5">< ...

javascriptjqueryhtml

Creating a Pop-Up on Website Load with HTML, CSS, and Jquery

<script> // utilizing only jquery $(document).ready(function(){ $('#overlay-back').fadeIn(500,function(){ $('#popup').show(); }); $(".close-image").on('click', function() { $('#po ...

javascriptjqueryhtmlcsstwitter-bootstrap

Organizing communications in NodeJS messaging application

My latest project involves creating a chat room using NodeJS and socket.io which allows multiple users to connect with unique usernames. Everything is running smoothly, except for one minor issue. I want the messages sent by me to appear in a different co ...

javascriptjqueryhtmlcsschat

Aligning images to the center of a grid using Bootstrap

I'm facing an issue with a one-row grid that is supposed to stack two images on top of each other when the screen size reduces. The problem arises when the screen becomes too small, as the images and the grid itself are not properly centered. https:/ ...

htmlcssbootstrap-4

Tips for ensuring consistent dimensions on a bootstrap card

Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the ...

htmlcssbootstrap-5

CSS: Specify `left:0` or `left:0px` to position

Is there a difference between using left:0; and left:0px;? From what I've noticed, both seem to work fine without any issues in Firefox's error console. Just curious if they have the same interpretation. I am working on some JavaScript that invo ...

css

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

Tips for selecting a radio button using its unique identifier

I'm having trouble getting this code to work properly. I can't seem to find any mistakes in the code, can someone please assist me in resolving this issue? <html> <body> <input type="radio" name="radio" id="radio1">Site 1< ...

javascripthtmlradio-button

"Fill an array with a list using an onClick event in JavaScript

I am currently working on a JavaScript code and I'm facing an issue with populating an array when a button is clicked. The code in question utilizes a list (ul) where the items (li) can be rearranged through mouse interaction. How can I implement an o ...

javascriptjqueryhtmlajaxarrays

Solving the default font problem in Laravel

I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...

phpcsslaravelbootstrap-4fonts