How Do i Add these social media icons side by side without affecting anything?-CodePudding

Image containing social media icons to be aligned side by side

I'm creating a react portfolio app, however, when adding these icons, instead of one above another I want to align them side by side. I am not good at CSS, so could anyone please guide me?

The icons are accessed by .c-icon class

contact.jsx

import "./Contact.css"  
import Github from "../../img/github.png"  
import Mail from "../../img/mail.png"  
import Linkedin from "../../img/linkedin.png"  
import Instagram from "../../img/instagram.png"  
import Twitter from "../../img/twitter.png"  
   
   const Contact = () => {
       return (
           <div className="c">
               <div className="c-bg">
                   <div className="c-wrapper">
                       <div className="c-left">
                           <h1 className="c-title">Wanna Discuss, Lets Connect</h1>
                           <div className="c-info">
                               <div className="c-info-item">
                                   <img src={Mail} alt="" className="c-icon" />
                               </div>
                           </div>
                           <div className="c-info">
                               <div className="c-info-item">
                                   <img src={Github} alt="" className="c-icon" />
                               </div>
                           </div>
                           <div className="c-info">
                               <div className="c-info-item">
                                   <img src={Linkedin} alt="" className="c-icon" />
                               </div>
                           </div>
                           <div className="c-info">
                               <div className="c-info-item">
                                   <img src={Instagram} alt="" className="c-icon" />
                               </div>
                           </div>
                           <div className="c-info">
                               <div className="c-info-item">
                                   <img src={Twitter} alt="" className="c-icon" />
                               </div>
                           </div>
                       </div>
                       <div className="c-right">

                       </div>
                   </div>
               </div>
           </div>
       )
   }
   
   export default Contact

CSS File

    .c{
    height: 100vh;
    position: relative;
}

.c-bg{
    width: 20px;
    height: 100%;
    background-color: #7395ae;
    position: absolute;
}

.c-wrapper{
    padding: 50px;
    display: flex;
}

.c-left{
    flex: 1;
}

.c-right{
    flex: 1;
}

.c-title{
    font-size: 60px;
    width: 80%;
}

.c-info-item{
    display: flex;
    align-items: center;
    margin: 50px 0px;
}

.c-icon{
    width: 30px;
    height: 30px;
    margin-right: 80px;
}

CodePudding user response：

To align those items you can use a table.

With that you would be able to fit all the icons that you want side by side and style them using the css file

CodePudding user response：

Create a parent div which contains the icons and make that use flex.

.c-icon-flex{
  display: flex;
}

<h1 className="c-title">Wanna Discuss, Lets Connect</h1>
<div >
  <div className="c-info">
    <div className="c-info-item">
      <img src={Mail} alt="" className="c-icon" />
    </div>
  </div>
  <div className="c-info">
    <div className="c-info-item">
      <img src={Github} alt="" className="c-icon" />
    </div>
  </div>
  <!--remaining icons here-->
</div>