Witam,
mam następujący problem: chodzi mi o to, że chciałbym aby szerokość diva general-note-my dopasowała się do końca tych małych divów note2. Bo na chwilę obecną ten div zajmuje szerokość na cały ekran a ja bym chciał żeby zajmował dokładnie tyle ile divów się zmieści na ekranie żeby taką miał szerokość i żeby był wyśrodkowany czyli margin 0 auto.
Jeżeli divów note2 jest tylko kilka to wszystko działa jak należy, natomiast jeśli divów note2 jest na 2 rzędy to div general-note-my zajmuje od razu 100% szerokości ekranu i max-width: fit-content; nie działa.
Proszę o pomoc jak to można rozwiązać.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
.note2 {
background: #fff;
border-radius: 7px;
box-shadow: 0 2px 5px #ccc;
padding: 10px;
width: 240px;
height: 200px;
margin: 16px;
}
.general-note-my {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
max-width: fit-content;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div class="border border-success general-note-my">
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<div class="note2">
<div className="note-properties">
<p className="p-note-bold">TEKST TEKST</p>
<p className="p-note">ZAWARTIOŚĆ</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
</script>
</body>
</html>
HTML 
CSS 
