I'm having problems with aligning these divs with the .acontainer class. Without the images, it aligned fine, but once the images came along, all hell broke loose. I've tried tweaking and googling, but not even professor google can help me here.
Thanks for taking the time to help.
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>