Achieving a horizontal alignment of these four div elements containing images

I need some assistance with aligning the divs using the .acontainer class. It was working perfectly before adding the images, but now it's all messed up. I've tried various adjustments and searches online, but I'm still stuck.

Thank you for any help you can provide.

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
  color: black;
}

.hdr-logos {
  display: block;
  font-size: 30px;
  color: #86fce1;
  background-color: black;
  width: 16%;
  border-radius: 20px;
  text-align: center;
  margin: auto;
}

body,
html {
  height: 100%;
  line-height: 1.8;
  margin: 0px;
  overflow: auto;
}


/* Full height image header */

.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("https://d34wrbuj7u1x6f.cloudfront.net/image/cache/data/Art%202017+/2744web-900xVariable.1.jpg");
  min-height: 100%;
}

.navbar {
  background-color: black;
  top: 0px;
}

.website-logo {
  float: left;
  padding: 15px;
  text-decoration: none;
  color: white;
}

.rsnbl {
  float: center;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
}

.rsnbl a {
  text-decoration: none;
  color: white;
  padding: 20px;
  margin-right: 40px;
  transition: 0.5s;
}

.rsnbl a:hover {
  background-color: #6b3f12;
  padding: 10px 100px 10px 100px;
  transition: 0.5s;
  transition-width: 300px;
}

.spanthings {
  text-align: center;
  color: white;
}

#top-span {
  font-size: 50px;
  color: white;
  padding: 5px 20px;
  border: solid, rgb(0, 0, 0, 0.6);
  background-color: rgb(0, 0, 0, 0.8);
  border-radius: 20px;
}

.abt-link1 {
  text-decoration: none;
  color: white;
  border: 1px solid;
  border-radius: 20px;
  padding: 10px;
  background-color: rgb(0, 0, 0, 0.6);
}

#btm-span {
  color: white;
  font-size: 25px;
  background-color: rgb(0, 0, 0, 0.5);
}

.abt-link1:hover {
  background-color: rgb(0, 0, 0);
  padding: 12px;
  transition: 0.6s;
}

.t1container {
  text-align: center;
}

.acontainer {
  max-width: 25vw;
  text-align: center;
  float: left;
}

.acontainer img {
  border-radius: 50%;
  max-width: 100vw;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar" id="myNavbar">
  <a href="#home" class="website-logo">LOGO</a>
  <!-- Right-sided navbar links -->
  <div class="rsnbl">
    <a href="#about">ABOUT</a>
    <a href="#team"><i class="fa fa-user"></i> TEAM</a>
    <a href="#work"><i class="fa fa-th"></i> WORK</a>
    <a href="#pricing"><i class="fa fa-usd"></i> PRICING</a>
    <a href="#contact"><i class="fa fa-envelope"></i> CONTACT</a>
  </div>
</div>

<header class="bgimg-1" id="home">
  <div class="spanthings">
    <span id="top-span">Supporting Culture</span><br>
    <span id="btm-span">Thrive within your identity</span>
    <p><a href="#about" class="abt-link1" style="transition:0.6s">Learn more and enquire today</a></p>
  </div>
  <div class="hdr-logos">
    <i class="fa fa-facebook-official"></i>
    <i class="fa fa-instagram"></i>
    <i class="fa fa-snapchat"></i>
    <i class="fa fa-pinterest-p"></i>
    <i class="fa fa-twitter"></i>
    <i class="fa fa-linkedin"></i>
  </div>
</header>

<!-- About Section -->
<div class="container" style="padding:128px 16px" id="about">
  <div class="t1container">
    <h3>ABOUT THE COMPANY</h3>
    <p>Key features of our company</p>
  </div>
  <div style="margin-top:64px">
    <div class="acontainer">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcMmREXrI8ss0rmMnZWKI7L5lL23vbnb3YGQ&usqp=CAU" height="200" width="200" class="abtusimgcul" />
      <p style="font-size:40px">Culture</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
    </div>
    <div class="acontainer">
      <img src="https://artsnorthernrivers.com.au/wp-content/uploads/KateHolmes_ArtsNR_ArtOnBundjalungMkt_2019_49.jpg" class="abtusimgpas" height="200" width="200" />
      <p style="font-size:40px">Passion</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </img>
      <div class="acontainer">
        <img src="https://artsnorthernrivers.com.au/wp-content/uploads/2021/02/ANR_Weaving-Book-_Web-Header.jpg" height="200" width="200" class="abtusimgsup" />
        <p style="font-size:40px">Support</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </div>
    </div>
  </div>

htmlcss

Answer №1

It appears that the issue stemmed from nesting the .acontainer inside another .acontainer, creating a child within a child.

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
  color: black;
}

.hdr-logos {
  display: block;
  font-size: 30px;
  color: #86fce1;
  background-color: black;
  width: 16%;
  border-radius: 20px;
  text-align: center;
  margin: auto;
}

body,
html {
  height: 100%;
  line-height: 1.8;
  margin: 0px;
  overflow: auto;
}


/* Full height image header */

.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("https://d34wrbuj7u1x6f.cloudfront.net/image/cache/data/Art%202017+/2744web-900xVariable.1.jpg");
  min-height: 100%;
}

.navbar {
  background-color: black;
  top: 0px;
}

.website-logo {
  float: left;
  padding: 15px;
  text-decoration: none;
  color: white;
}

.rsnbl {
  float: center;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  font-size: 17px;
}

.rsnbl a {
  text-decoration: none;
  color: white;
  padding: 20px;
  margin-right: 40px;
  transition: 0.5s;
}

.rsnbl a:hover {
  background-color: #6b3f12;
  padding: 10px 100px 10px 100px;
  transition: 0.5s;
  transition-width: 300px;
}

.spanthings {
  text-align: center;
  color: white;
}

#top-span {
  font-size: 50px;
  color: white;
  padding: 5px 20px;
  border: solid, rgb(0, 0, 0, 0.6);
  background-color: rgb(0, 0, 0, 0.8);
  border-radius: 20px;
}

.abt-link1 {
  text-decoration: none;
  color: white;
  border: 1px solid;
  border-radius: 20px;
  padding: 10px;
  background-color: rgb(0, 0, 0, 0.6);
}

#btm-span {
  color: white;
  font-size: 25px;
  background-color: rgb(0, 0, 0, 0.5);
}

.abt-link1:hover {
  background-color: rgb(0, 0, 0);
  padding: 12px;
  transition: 0.6s;
}

.t1container {
  text-align: center;
}

.acontainer {
  max-width: 25vw;
  text-align: center;
  float: left;
}

.acontainer img {
  border-radius: 50%;
  max-width: 100vw;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar" id="myNavbar">
  <a href="#home" class="website-logo">LOGO</a>
  <!-- Right-sided navbar links -->
  <div class="rsnbl">
    <a href="#about">ABOUT</a>
    <a href="#team"><i class="fa fa-user"></i> TEAM</a>
    <a href="#work"><i class="fa fa-th"></i> WORK</a>
    <a href="#pricing"><i class="fa fa-usd"></i> PRICING</a>
    <a href="#contact"><i class="fa fa-envelope"></i> CONTACT</a>
  </div>
</div>

<header class="bgimg-1" id="home">
  <div class="spanthings">
    <span id="top-span">Supporting Culture</span><br>
    <span id="btm-span">Thrive within your identity</span>
    <p><a href="#about" class="abt-link1" style="transition:0.6s">Learn more and enquire today</a></p>
  </div>
  <div class="hdr-logos">
    <i class="fa fa-facebook-official"></i>
    <i class="fa fa-instagram"></i>
    <i class="fa fa-snapchat"></i>
    <i class="fa fa-pinterest-p"></i>
    <i class="fa fa-twitter"></i>
    <i class="fa fa-linkedin"></i>
  </div>
</header>

<!-- About Section -->
<div class="container" style="padding:128px 16px" id="about">
  <div class="t1container">
    <h3>ABOUT THE COMPANY</h3>
    <p>Key features of our company</p>
  </div>
  <div style="margin-top:64px">
    <div class="acontainer">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcMmREXrI8ss0rmMnZWKI7L5lL23vbnb3YGQ&usqp=CAU" height="200" width="200" class="abtusimgcul" />
      <p style="font-size:40px">Culture</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
    </div>
    <div class="acontainer">
      <img src="https://artsnorthernrivers.com.au/wp-content/uploads/KateHolmes_ArtsNR_ArtOnBundjalungMkt_2019_49.jpg" class="abtusimgpas" height="200" width="200" />
      <p style="font-size:40px">Passion</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
    </div>
    <div class="acontainer">
      <img src="https://artsnorthernrivers.com.au/wp-content/uploads/2021/02/ANR_Weaving-Book-_Web-Header.jpg" height="200" width="200" class="abtusimgsup" />
      <p style="font-size:40px">Support</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
    </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

Custom pagination page size in AngularJS trNgGrid

I have been working on developing an Angular table using trNgGrid. It's functioning fine, but I am looking to incorporate custom pagination where the user can choose the number of page items to display per page. I checked out the TrNgGrid Global Opti ...

htmlangularjspaginationgrid

Changes to the className of a React component will trigger a re-render of

When the className of the parent changes, React children will re-render. import React from 'react'; import { useSelector } from 'react-redux'; import items from './ItemsList.js'; import Item from './Item'; import &ap ...

javascripthtmlreactjsrender

designing a unique organizational chart layout with HTML and CSS

I'm facing a challenge in creating a customized organizational chart layout using HTML and CSS. Despite my efforts, I am having difficulties achieving the desired structure that includes parent, child, and grandchild nodes connected in a specific way. ...

htmlcssbootstrap-4responsive-design

Triggering an animation on one element by hovering over a different element

I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf. Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot ...

css

What is the best way to have react-bootstrap's Dropdown automatically open when hovering your mouse over it?

Looking for a simple solution. I want the dropdown to open when hovering over it, rather than clicking on it. Here is my current code: <Nav> <NavDropdown onMouseEnter = {()=> isOpen=true} open={isOpen} noCare ...

javascriptcsstwitter-bootstrapreactjsweb

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...

javascriptajaxhtml

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

javascriptjqueryhtmlcss

jQuery can be used to automatically close a subnav when another subnav is opened

Currently, my code is almost perfect, but there is a slight issue with allowing multiple sub-navs to be open at the same time. I want to ensure that when one sub-nav is opened, any others automatically close. Essentially, in the jQuery code below, I need ...

htmljquerycss

Adjust the z-Index of the list item element

I am attempting to create an effect where, upon clicking an icon, its background (width and height) expands to 100% of the page. However, I am struggling with ensuring that the 'effect' goes underneath the this.element and above everything else. ...

javascriptjqueryhtmlcss

Expand the width of the image to fill the entire screen

I have been working on trying to insert an image into my header element. However, when I test it using Live Server, the image doesn't fully fill the width of the container. Update: The dimensions of the image are 899.875 x 600. Below is my CSS and H ...

htmlcssimagecontainers

Enhancing the KeyValuePair by incorporating additional value or parameter

I currently have a List<KeyValue<string, int>> that I utilize in the View of one of my applications. While it functions as intended, I am interested in expanding it by potentially incorporating an additional parameter/value to the KeyValue pair ...

c#cssasp.netasp.net-mvcgenerics

The Bootstrap 5 navigation bar does not extend to the full width of its parent

While working on a Bootstrap navigation inside a container, I encountered an issue where the navigation bar was not expanding to match the width of the container. It seemed like the padding had to be manually adjusted to fit properly. Below is the code sn ...

javascripthtmlcssbootstrap-5

Automatically select a radio button upon loading the page

Below is the code I am currently using: jQuery('#choice_1_10_3_1').attr('checked','checked'); I need this radio button to be checked automatically when the page loads. Despite no errors being shown in the console, the code i ...

jqueryhtml

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

javascripthtmlcssweb

Swift: NSAttributeString generates unexpected HTML output

I attempted to use NSAttributeString to parse HTML, but encountered a problem when trying to display a table within a list item. <ol> <li>first <table> <tbody> <tr> ...

htmliosswiftmobile

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

htmlcss

`html2canvas encountered an issue: Unable to locate a logger instance`

When I use html2canvas to render the same content repeatedly, I encounter an error about 5% of the time. It seems to be sporadic and I'm not sure why it occurs. What could be causing this unpredictable behavior? html2canvas.js:2396 Uncaught (in promi ...

javascripthtmlhtml2canvas

The overflow property is not functioning as anticipated

I've browsed Google and this site, but I couldn't find a solution to my issue. On my webpage, I have a shoutbox and a teamspeak viewer with a specific height for the outer div. The scrollbars don't look good on our new design, so I attempt ...

htmlcssscrollbaroverflow

The transparent sticky navigation bar isn't functioning as intended

I stumbled upon a code for the sticky navbar that I found on this website. Intrigued, I decided to copy the code and test it out on my Laravel blade file. The output turned out like this: https://i.sstatic.net/lexRl.jpg Here is how I copied the code: CS ...

htmlcssbootstrap-4

css - the art of centering span text within a rounded button

CodeSandbox: https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js https://i.sstatic.net/HDtft.png I'm trying to center the dash text within a button, but I'm struggling to find a solution. html <button class="round-butto ...

cssvue.jsbootstrap-4