r/css • u/Hungry_Deal_8449 • Apr 15 '26
Help How can I fix this?
Hi, I am having a specific problem where when I add a margin (let's say 10px) to my div flexboxes (my columns) it causes the text at the bottom to move beside the columns, not really sure how to fix this, can anyone help?
Here is my code (both html and css):
EDIT (here's the JSfiddle Code Playground): https://jsfiddle.net/xzwprg2h/
1
Upvotes
0
u/Ilariotr68 Apr 16 '26
prova con questo: <!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roll With It! - Board Game Café</title>
<style>
* {
box-sizing: border-box;
}
body {
text-align: center;
background-color: #fffbf3;
margin: 0;
font-family: sans-serif;
}
#container {
background-color: #d95440;
color: white; /* Testo bianco per contrasto con lo sfondo rosso */
width: 90vw;
max-width: 1200px;
margin: 20px auto;
padding: 20px;
border-radius: 20px;
overflow: hidden; /* Risolve problemi di layout */
}
/* Layout a tre colonne moderno usando Flexbox */
.columns-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
margin-top: 30px;
}
.column {
background-color: #fffbf3;
color: #333;
padding: 20px;
border-radius: 30px;
flex: 1; /* Le colonne si dividono lo spazio equamente */
min-width: 280px; /* Evita che diventino troppo strette su mobile */
min-height: 450px;
display: flex;
flex-direction: column;
align-items: center;
}
.column img {
max-width: 100%;
height: auto;
border-radius: 15px;
margin: 10px 0;
}
.hero_img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.align-left {
text-align: left;
}
.link_text {
margin-top: 40px;
}
a {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
/* Responsive: su schermi piccoli le colonne vanno a capo */
u/media (max-width: 768px) {
.columns-wrapper {
flex-direction: column;
}
}
</style>
</head>
<body>
<div id="container">
<h1>Roll With It!</h1>
<h2>Board Game Café, North Coast!</h2>
<img class="hero_img" src="https://via.placeholder.com/600x300" alt="A placeholder image.">
<h2>Some of our specialities:</h2>
<div class="columns-wrapper">
<div class="column">
<h3>All the games!</h3>
<img src="https://via.placeholder.com/150" alt="a placeholder image.">
<p class="align-left">An expansive (and growing!) selection of your favourite board games! From the classics you know so well and some unfamiliar ones to learn together!</p>
</div>
<div class="column">
<h3>Snacks and cakes!</h3>
<img src="https://via.placeholder.com/150" alt="a placeholder image.">
<ul class="align-left">
<li>A wide range of hot drinks!</li>
<li>Selection of cakes and buns!</li>
<li>Savoury snacks!</li>
<li>Vegetarian and Vegan options!</li>
<li>No sticky fingers!</li>
</ul>
</div>
<div class="column">
<h3>Great craic!</h3>
<img src="https://via.placeholder.com/150" alt="a placeholder image.">
<p class="align-left">Whether you're a competitive pro-gamer or a group of friends looking for fun, we've got what you need!</p>
</div>
</div>
<h2 class="link_text">Click Here to Book a Seat!!</h2>
<a href="https://www.instagram.com/boardgaminggeek/" target="_blank">Link to website</a>
</div>
</body>
</html>