The code you gave me makes all of the badges display differently across all posts. in a straight line, any way....

I was thinking would it be better to remove the badges from the Q n A box? it will look beter than i think. That seems the be the problem 

We found the following links it may help you, please check it: 

https://www.ostraining.com/blog/wordpress/custom-js/

https://premium.wpmudev.org/blog/learn-how-to-add-custom-javascript-to-wordpress-the-right-way/

Please add this CSS code, for making it more compact.

#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author-data .author-title{
   display: flex !important;
   flex-direction: row;
}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author-data .author-title span{
   display: flex ;
   margin-left: 5px;
}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .author-rating-full{
   padding: 4px;
}
#wpforo #wpforo-wrap .wpforo-mycred-badges-wrap .mycred-users-badges{
   width: 310px;
   line-height: initial;
}
#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-box-l3a-right{
   margin-left: 25%;
}

Also please add the following JS code in your current active theme JS files:

jQuery('.author-title').next('br').remove();

Don't forget to delete all caches and press CTRL+F5(twice) on the frontend before checking.

but i was hoping to more making smaller, yours is far more compact then  mine is, is that becuase mine show badges in the block?

Please navigate to the Dashboard > Forums > Settings > Styles admin page , put the following CSS code in the "Custom CSS code" textarea:

#wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author-data-content{
   background: #8DCE0C;
}

Don't forget to delete all caches and press CTRL+F5(twice) on the frontend before checking.

On my site, its massive lol, Take a look:

Q n A Section

Also, the back ground is a really dark green, is it possible to change that so looks more like the box in the q n a section?