Estoy tratando de alinear estos íconos como una fila usando className="col s1" pero cuando ejecuto este código, se muestra en una columna por alguna razón. Intenté eliminar la etiqueta del contenedor, agregarla, cambiar el tamaño de las columnas, pero por alguna razón siempre se muestra como una columna en lugar de una fila.

¿Hay alguna manera de que pueda hacer que esto funcione?

Aquí hay un enlace al código: Proyecto

Principal.jsx

 import React, { useState, useEffect, useRef } from "react"; import Helmet from "react-helmet"; import Socials from "./Socials"; function Main(props) { const socialMedia = [ { link: "https://www.linkedin.com/in/", icon: "linkedin" }, { link: "https://github.com/", icon: "github" }, { link: "https://www.youtube.com/", icon: "youtube" }, { link: "mailto:example@ex.co?subject=Felipe%20GD%20--%20Request%20To%20Contact", icon: "email" } ]; return ( <React.Fragment> <Helmet> <title>Felipe GD</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </Helmet> <div className="container"> <div clasName="row"> {socialMedia.map((socials) => ( <Socials getOpacity={null} getVisibility={null} link={socials.link} icon={socials.icon} /> ))} </div> </div> </React.Fragment> ); } export default Main;

Sociales.jsx

 import React, { useEffect, useRef } from "react"; import { SocialIcon } from "react-social-icons"; function Socials(props) { let size = useRef("20"); useEffect(() => { if (window.innerWidth > 500) { size.current = 50; } else { size.current = 25; } }, [size]); return ( <React.Fragment> <div className="col s1"> <SocialIcon id={props.icon} bgColor="#2C2C2C" fgColor="#ECCECE" network={props.icon} url={props.link} /> </div> </React.Fragment> ); } export default Socials;

Sé que podría hacer que esto funcione al no convertirlo en un componente, pero eso no me parece limpio, me gustaría poder usar la función de mapa si es posible.