We Keep Coding

Need help to span <div> elements in one row

I want exactly like this website: https://www.petzl.com/INT/en
I want to show the text that is the center having 3 divs "Services" "Training" and "Shop" to have in one line or row.
I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.
If I dont use this line "place-content:center;" it places it to left with a lot of spaces.
My website link: beta.edgerope.com
Please find code below:
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:

You can use CSS flex property something like this
.image {
display: flex;
justify-content: space-evenly;
align-items: center;
}

Full width div triggered by onclick

My sandbox on JSFIDDLE
When 'OPEN' is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn't work.
In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.
[]
I'm testing this function before I deploy it on my website.
jQuery -
$(".openit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
HTML -
<div class="wrapper">
<div class="back">BG
<div class="expandBG">
<div class="openit">OPEN</div>
<div class="flex-col">
<div class="closeit">CLOSE</div>
<div class="content text" style="display: none;">
<div>(CONTENT HERE)</div>
</div>
</div>
</div>
</div>
</div>
CSS -
body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}

It's because of the div with a class name back. increase the width of that div to 100% when opneit is clicked and then back to its original size when closeit is clicked.
// add this to your CSS file
.w-full {
width: 100%
}
then include these two lines in your javaScript file
$(".openit").on("click", function() {
$(".back").addClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".back").removeClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});

How can I align these list elements with some buttons?

I want to align some list elements that are created via Javascript with their corresponding buttons. Every time I add a new element to the list, the text appears in a lower position than the "X/Remove element" buttons. Can you please tell me what I'm doing wrong?
You can check the pen right here:
https://codepen.io/Watashi10/pen/RwwQegr
The ideal thing would be to have the list elements and the X buttons in the same line or at the same height under the "input" element.
Here is a screenshot of the actual list
HTML:
<body>
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 id="header">My Shopping List</h1>
</header>
<input class="text-center col-6" id="userinput" type="text" placeholder="add items">
<section class="row">
<button id="enter">Enter</button>
</section>
<div class="text-center col-12" id="shopping">
<ul class="list" style="list-style: none">
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
CSS:
body,
html {
width: 100%;
height: 100%;
font-family: 'Fjalla One', sans-serif;
background: url("https://wallpaperplay.com/walls/full/5/6/5/68320.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 15vw;
margin: 0 auto;
min-height: 50vh;
}
.row {
display: flex;
justify-content: center;
flex-direction: row;
}
#header {
display: inline-block;
position: relative;
bottom: 200px;
font-family: 'Fredericka the Great';
font-size: 5rem;
color: white;
}
input {
flex-grow: 5rem;
border: none;
padding: 25px;
}
button {
border: 1px solid;
background: blue;
color: white;
}
input, button {
position: relative;
bottom: 50px;
}
.userinput {
float: left;
}
h2 {
font-family: 'Fredericka the Great';
color:#FFB6C1;
font-size: 12px;
}
ul li {
padding: 3rem;
font-family: 'Fredericka the Great';
font-size: 25px;
color: #ffffff;
}
.done {
text-decoration: line-through;
}
I would appreciate any kind of help. Thank you!

Remove the bottom: 50px from
input, button {
position: relative;
bottom: 50px; //remove this
}
or if you want input to have bottom: 50px; seperate the css styling of them.
input {
position: relative;
bottom: 50px;
}
button {
position: relative;
margin-left: 15px !important; //just to make it a little nicer
}

So you're creating a textnode from the user input box here:
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
I would recommend making this a div or a p or something else that can be styled. Like so:
let inputValue = document.createElement('div');
inputValue.innerHTML = input.value;
li.prepend(inputValue)
input.value = "";
So you're li sctucture should look more like this:
<li>
<div class="value"></div>
<button></button>
</li>
After that, theres many ways to have these be inline. You could style the li to have a display: flex, or you could float the button to the right within the li. But I would start with making the value that you catch and put into the li something besides just the textNode.

Div within an anchor tag not taking up entire width? HTML and CSS

Okay, so I've got a div tag inside an a tag. The a tag, which has class "project" has a background image. I'm trying to make several little 300px by 300px boxes, in which there is an image, with text centered (vert and hor), so that you'd click the image and it'll take you to a link.
I want to get a hover effect (on desktops) so that when you go over this a tag, which has the image as a background image, the image darkens, making the white text more visible. On mobile, this image is always darkened so the text is clearly visible.
Here's the problem: I have everything working fine, but the "overlay" div within the a tag is not taking up the entire width of the a tag (300px by 300px box). Therefore, when I hover over the a tag, and the "overlay" div turns dark, there's a little space on both sides that is not dark.
Here is some of the code:
HTML for the projects section:
<!-- Projects Showcase Section -->
<div class="projects-section">
<div class="wrapper">
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
<a href="link-to-project" class="project">
<div class="overlay">
<h1>Project Name</h1>
</div>
</a>
</div>
</div>
CSS:
.projects-section {
width: 90%;
margin: 0 auto;
text-align: center;
}
.wrapper {
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.project {
width: 300px;
height: 300px;
background-image: url('../assets/img/p1-min.jpg');
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
margin: 20px 20px 0 20px;
}
.project:nth-child(2) {
width: 300px;
height: 300px;
background-image: url('../assets/img/p2-min.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
}
.project:nth-child(3) {
width: 300px;
height: 300px;
background-image: url('../assets/img/p3-min.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 20px;
}
a {
text-decoration: none;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 30px;
padding: 0 10px;
}
.project .overlay {
height: 100%;
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
transition: 0.4s all ease;
border-radius: 20px;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.5);
}
Here's an image of what the problem looks like:
As you can see, the left and right side of the "overlay" div are not fully expanded to fit inside the a tag, making it obvious there's a div there.
Please help me fix it, thank you.

If you remove the left/right padding on the anchors, and extend the width of your .project elements to 320px, it should look how you want it - though I'm not sure if you have the padding there for some other purpose.
.project {
width: 320px;
height: 300px;
background-image: url('http://via.placeholder.com/300x300');
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
margin: 20px 20px 0 20px;
}
a {
text-decoration: none;
font-weight: bold;
font-family: 'Roboto', sans-serif;
color: white;
font-size: 30px;
padding: 0;
}
http://jsfiddle.net/dtwLjqx4/

How can I make these divs move under each other with page responsiveness?

I have a row of divs with images within them that looks like this:
And when I change the page size, essentially what it will look like on mobile devices the divs begin to fall below each other like this:
Which is amazing because it's exactly what I want. But I have another row of divs that look like this:
But when I change the page size, this set of divs don't fall under each other like the other divs. They're just cut off by the page so essentially these divs are not mobile responsive. Can anybody help me with have to get these second set of divs responsive like the first set?
Thank you in advance!
HTML:
<div class="row-fluid" id="extras">
<div class="container-fluid">
<div class="row-fluid flex">
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/05/socialmed.png" width="155" height="auto" max-width="100%"/>
</div>
<div class="block text-center">
<ul class="aboutli">
<li><a target="_blank" href="http://mysite/information">About Us</a></li>
<li><a target="_blank" href="http://mysite/information">FAQ's</a></li>
<li><a target="_blank" href="http://mysite/information">Contact Us</a></li>
<li><a target="_blank" href="http://mysite/information">Work With Us</a></li>
<li><a target="_blank" href="http://mysite/information">Terms and Conditions</a></li>
<li><a target="_blank" href="http://mysite/information">Privacy Policy<br></a></li>
<li><a target="_blank" img src="http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png" href="https://www.drinkaware.co.uk/"><div id="drinkaware"></div></a></li>
</ul>
</div>
<div class="block text-center">
<div id="words">
<p class="become">become a driver</p>
<p class="driver-para">As an ever evolving new start up we'll constantly be looking for friendly drivers to join the team, so If you'd be interested in join our team click the button below to see the available opportunities we have available.</p>
<input type="submit" id="driver-btn" value="FIND OUT MORE" onclick="location='http://mysite/join-the-team/'"/>
</div>
</div>
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/07/testimg.png" width="200" height="auto"/>
</div>
</div>
</div>
</div>
CSS:
#extras {
height: auto;
width: 100%;
overflow: hidden;
background-color: #fff;
}
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
#words {
width: 300px;
height: auto;
}
#linksdrinks {
margin-top: 70px;
margin-right: 70px;
width: 160px;
height: 238px;
display: inline-block;
vertical-align: top;
}
ul.aboutli {
color: #000000;
font-size: 13px;
margin: 0;
text-decoration: none;
list-style-type: none !important;
line-height: 0.8cm;
}
#drinkaware {
width: 156px;
height: 50px;
display:list-item;
background-image: url('http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png');
background-size: 150px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
vertical-align: top;
list-style-type: none !important;
}
#driver {
margin-left: 70px;
margin-right: 70px;
padding: 5px;
width: 300px;
height: auto;
display: inline-block;
}
.become {
color: #a6a6a6;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.driver-para {
font-size: 13px;
}
#driver-btn {
color: #fd0e35;
font-size: 11px;
font-weight: bold;
text-shadow: none;
padding: 7px;
background-color: #fff;
border: 2px solid #fd0e35;
box-shadow: none;
border-radius: 4px;
outline: none;
}
#driver-btn:hover {
color: #fff;
background-color: #fd0e35;
}
#open24 {
display: inline-block;
width: 200px;
height: auto;
background-image: url('http://mysite/wp-content/uploads/2016/04/open247.png');
background-size: 250px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}

You can try this
#media screen and (max-width:767px){
.flex {
display: block;
}
}

Try with this code. Write your below css in media query
#media (min-width:767px) {
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
}

Also for cross browser support display: inline-flex; is now display: flex;
be sure to use
http://autoprefixer.github.io/

You can try below code.
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}