Bonjour je découvre CSS et je galère niveau placement.

J'avais cru comprendre que le float me permettait de placer mes éléments textes/bloc/image n'importe où par rapport aux autres éléments.

J'aimerais placé le "MADE FOR SHARING" collé juste au-dessus du titre. Seulement quand j'essaye de la placer via float il y'a quand même une marge qui apparait et espace les titres en + de décaler le positionnement général des éléments!

J'ai supprimé toutes les marges du bloc MADE FOR SHARING mais elle apparait quand même...

Si quelqu'un peut m'aider

Le résultat que j'aimerais avoir :

Ce que j'ai :

mon code CSS HTML

N'utilise pas float.
Flexbox ou grid si tu veux placer des éléments la plupart du temps.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

J'ai essayé mais ça donne n'importe quoi, dégouté

Et surtout avec les flexbox j'étais censé aussi mettre l'image dedans ? Parce que du coup je peux pas placé mon image à coté

ça m'a refoutu tout en première page sans prendre en compte le style. Et surtout je suis censé les placer précisément comment les flexbox, j'ai même fais du Flex Froggy mais je comprends pas comment leur donner une position très précise.

mon CSS

mon HTML

Apprends le CSS avant de te lancer dans des projets concrets, tu maîtrises pas les bases en terme de layout

ce guide est super utile pour flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Pour ton titre et ton made for sharing, commence par mettre

margin :0;
padding: 0;

pour reset les propriétés par défaut, ensuite tu pourras les espacer à ta guise.
float est plutôt déconseillé à utiliser.

Si tes marges dépassent 300px (et je suis gentil) c'est que t'as merdé quelque part

Le 23 octobre 2021 à 22:34:13 :
ce guide est super utile pour flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

J'approuve, a chaque fois que je dois refaire du web je passe par ce site pour me refaire une idée du truc