footer is too big and i want sections side by side

Question

footer doesnt seem good how can i fix it?

it looks huge plus i want to put kategoriler and referanslar section side by side.

i tried to make footer smaller and i tried to put sections together but i couldnt

 .site-footer { background-color: rgb(226, 109, 128); padding: 45px 0 20px; font-size: 15px; line-height: 24px; color: #ffffff; }.site-footer hr { border-top-color: rgb(255, 255, 255); opacity: 0.5 }.site-footer hr.small { margin: 20px 0 }.site-footer h6 { color: rgb(0, 0, 0); font-size: 16px; text-transform: uppercase; margin-top: 5px; letter-spacing: 2px }.site-footer a { color: #ffffff; }.site-footer a:hover { color: #eeafdd; text-decoration: none; }.footer-links { padding-left: 0; list-style: none }.footer-links li { display: block }.footer-links a { color: #ffffff }.footer-links a:active, .footer-links a:focus, .footer-links a:hover { color: #000000; text-decoration: none; }.footer-links.inline li { display: inline-block }.site-footer.social-icons { text-align: right }.site-footer.social-icons a { width: 50px; height: 40px; line-height: 40px; margin-left: 6px; margin-right: 0; border-radius: 100%; background-color: #33353d }.copyright-text { margin: 0 } @media (max-width:991px) {.site-footer [class^=col-] { margin-bottom: 30px } } @media (max-width:767px) {.site-footer { padding-bottom: 0 }.site-footer.copyright-text, .site-footer.social-icons { text-align: center } }.social-icons { padding-left: 0; margin-bottom: 0; list-style: none }.social-icons li { display: inline-block; margin-bottom: 4px }.social-icons li.title { margin-right: 15px; text-transform: uppercase; color: #96a2b2; font-weight: 700; font-size: 13px }.social-icons a { background-color: #eceeef; color: #818a91; font-size: 16px; display: inline-block; line-height: 44px; width: 44px; height: 44px; text-align: center; margin-right: 8px; border-radius: 100%; -webkit-transition: all.2s linear; -o-transition: all.2s linear; transition: all.2s linear }.social-icons a:active, .social-icons a:focus, .social-icons a:hover { color: #fff; background-color: #060708 }.social-icons.size-sm a { line-height: 34px; height: 34px; width: 34px; font-size: 14px }.social-icons a.facebook:hover { background-color: #ff0606 }.social-icons a.twitter:hover { background-color: #00aced }.social-icons a.linkedin:hover { background-color: #0f86fd }.social-icons a.dribbble:hover { background-color: #e86969 } @media (max-width:7px) {.social-icons li.title { display: block; margin-right: 0; font-weight: 600 } }

 <footer class="site-footer"> <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <h6>Kategoriler</h6> <ul class="footer-links"> <li><a href="index.html">Anasayfa</a></li> <li><a href="hakkımda.html">Hakkımda</a></li> <li><a href="fotogaleri.html">Fotogaleri</a></li> <li><a href="iletisim.html">İletişim</a></li> <li><a href="http://scanfcode.com/category/android/">Android</a></li> <li><a href="http://scanfcode.com/category/templates/">Templates</a></li> </ul> </div> <div class="col-xs-6 col-md-3"> <h6>Referans Linkleri</h6> <ul class="footer-links"> <li><a href="https://www.adu.edu.tr/">Adnan Menderes Üniversitesi</a></li> <li><a href="http://scanfcode.com/contact/">Damla Zeliha İnce</a></li> <li><a href="https://hakanguleryuz.com.tr/">Hakan Güleryüz</a></li> <li><a href="http://scanfcode.com/privacy-policy/">Privacy Policy</a></li> <li><a href="http://scanfcode.com/sitemap/">Sitemap</a></li> </ul> </div> </div> <hr> </div> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-6 col-xs-12"> <p class="copyright-text">Copyright &copy; 2022 All Rights Reserved by <a href="#">Buse Nur Çetin</a>. </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <ul class="social-icons"> <li><a class="Github" href="https://github.com/busenurcetin"><i class="fab fa-github"></i></a></li> <li><a class="twitter" href="https://twitter.com/busenurcetin16"><i class="fab fa-twitter"></i></a></li> <li><a class="dribbble" href="https://realbusenurcetin.tech/"><i class="fab fa-safari"></i></a></li> <li><a class="linkedin" href="https://www.linkedin.com/in/busenur-%C3%A7etin-349b05253/"><i class="fab fa-linkedin"></i></a></li> </ul> </div> </div> </div> </footer>

Answer 1

 .site-footer { background-color: rgb(226, 109, 128); padding:45px 0 20px; font-size:15px; line-height:24px; color:#ffffff; }.site-footer hr { border-top-color:rgb(255, 255, 255); opacity:0.5 }.site-footer hr.small { margin:20px 0 }.site-footer h6 { color:rgb(0, 0, 0); font-size:16px; text-transform:uppercase; margin-top:5px; letter-spacing:2px }.site-footer a { color:#ffffff; }.site-footer a:hover { color:#eeafdd; text-decoration:none; }.footer-links { padding-left:0; list-style:none }.footer-links li { display:block }.footer-links a { color:#ffffff }.footer-links a:active,.footer-links a:focus,.footer-links a:hover { color:#000000; text-decoration:none; }.footer-links.inline li { display:inline-block }.site-footer.social-icons { text-align:right }.site-footer.social-icons a { width:50px; height:40px; line-height:40px; margin-left:6px; margin-right:0; border-radius:100%; background-color:#33353d }.copyright-text { margin:0 } @media (max-width:991px) {.site-footer [class^=col-] { margin-bottom:30px } } @media (max-width:767px) {.site-footer { padding-bottom:0 }.site-footer.copyright-text,.site-footer.social-icons { text-align:center } }.social-icons { padding-left:0; margin-bottom:0; list-style:none }.social-icons li { display:inline-block; margin-bottom:4px }.social-icons li.title { margin-right:15px; text-transform:uppercase; color:#96a2b2; font-weight:700; font-size:13px }.social-icons a{ background-color:#eceeef; color:#818a91; font-size:16px; display:inline-block; line-height:44px; width:44px; height:44px; text-align:center; margin-right:8px; border-radius:100%; -webkit-transition:all.2s linear; -o-transition:all.2s linear; transition:all.2s linear }.social-icons a:active,.social-icons a:focus,.social-icons a:hover { color:#fff; background-color:#060708 }.social-icons.size-sm a { line-height:34px; height:34px; width:34px; font-size:14px }.social-icons a.facebook:hover { background-color:#ff0606 }.social-icons a.twitter:hover { background-color:#00aced }.social-icons a.linkedin:hover { background-color:#0f86fd }.social-icons a.dribbble:hover { background-color:#e86969 }.row{ display:flex; }.marginright{ margin-right:10px; }.marginleft{ margin-left:10px; } @media (max-width:7px) {.social-icons li.title { display:block; margin-right:0; font-weight:600 } }

 <footer class="site-footer"> <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3 marginleft marginright" > <h6>Kategoriler</h6> <ul class="footer-links"> <li><a href="index.html">Anasayfa</a></li> <li><a href="hakkımda.html">Hakkımda</a></li> <li><a href="fotogaleri.html">Fotogaleri</a></li> <li><a href="iletisim.html">İletişim</a></li> <li><a href="http://scanfcode.com/category/android/">Android</a></li> <li><a href="http://scanfcode.com/category/templates/">Templates</a></li> </ul> </div> <div class="col-xs-6 col-md-3"> <h6>Referans Linkleri</h6> <ul class="footer-links"> <li><a href="https://www.adu.edu.tr/">Adnan Menderes Üniversitesi</a></li> <li><a href="http://scanfcode.com/contact/">Damla Zeliha İnce</a></li> <li><a href="https://hakanguleryuz.com.tr/">Hakan Güleryüz</a></li> <li><a href="http://scanfcode.com/privacy-policy/">Privacy Policy</a></li> <li><a href="http://scanfcode.com/sitemap/">Sitemap</a></li> </ul> </div> </div> <hr> </div> <div class="container"> <div class="row"> <div class="col-md-8 col-sm-6 col-xs-12"> <p class="copyright-text">Copyright &copy; 2022 All Rights Reserved by <a href="#">Buse Nur Çetin</a>. </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <ul class="social-icons"> <li><a class="Github" href="https://github.com/busenurcetin"><i class="fab fa-github"></i></a></li> <li><a class="twitter" href="https://twitter.com/busenurcetin16"><i class="fab fa-twitter"></i></a></li> <li><a class="dribbble" href="https://realbusenurcetin.tech/"><i class="fab fa-safari"></i></a></li> <li><a class="linkedin" href="https://www.linkedin.com/in/busenur-%C3%A7etin-349b05253/"><i class="fab fa-linkedin"></i></a></li> </ul> </div> </div> </div> </footer>