Hi I'm getting issues with some css classes in joomla. I've two divs inside a module, the first is the wrapper class="wrapper", another may be the content class="content" . Submissions are inside wrapper. Things I am attempting to do is target a css style around the content class. Usually I'd just put .content within the style sheet, but however , these kinds can be used several occasions through the page. So within the after sales, you are able to assign a module a category title, and so i have known as that one .recommendations .

To ensure that I dont alter the rest of the content classes around the page I'm attempting to target it by putting this :

.testimonials .content {my style info I am trying to apply} 

but it's no longer working, I understand this can be done with divs, so

#testimonials .content {my style info I am trying to apply} 

but my real question is is this completed with classes ?, if that's the case something is certainly going wrong like me attempting to make use of the following :

.testimonials .content {font-size:12px; width:300px !important;}

for some reason this content isn't wrapping and merely vanishes from the page in the finish from the paragraph, and so i am attempting to make certain the first level class this content is sitting isn't overlapping anything, the odd factor is even when I fix the div class this content sits directly into 50px still it wont wrap the written text, so I don't know should i be focusing on it right ?.

edit >>>>>>>>>>..

The html Joomla is creating essentially appears like this >>

<div class="wrapper">
<div class="content">SOME CONTENT</div
</div>

then its covered with millions of other divs within the traditional Joomla style.

I've because of the module the course of recommendations, therefore it eventually ends up searching something similar to :

<div class="testimonials">
 <div class="wrapper">
<div class="content">SOME CONTENT</div
</div>
</div>

EDIT 3 >>>>>>> OK, this really is what it's spitting out

     <div class="testimonials">
                        <div class="key4-block">
                                    <div class="module-title"><h2 class="title">Client Testimonials</h2></div>
                                    <div class="key4-module-inner">
                        <div class="module-content">

    <script type="text/javascript">
        RokStoriesImage['rokstories-184'].push('');
            RokStoriesImage['rokstories-184'].push('');
            RokStoriesImage['rokstories-184'].push('');
        </script>
    <div id="rokstories-184" class="rokstories-layout6 content-left"  >
        <div class="feature-block">

            <div class="feature-wrapper">
            <div class="feature-container">
                            <div class="feature-story">
                    <div class="image-full" style="float: right">
                                                <img src="/sos/" alt="image" />

                    </div>
                    <div class="desc-container">
                        <div class="wrapper">

                                                        <span class="content"><p>Arrived in under 30 mins and got my pride and joy home in one piece, the day it conked out on me.</p>

    <p>- Mr A Another</p></span>

                                                </div>
                    </div>
                </div>
                            <div class="feature-story">
                    <div class="image-full" style="float: right">
                                                <img src="/sos/" alt="image" />

                    </div>
                    <div class="desc-container">

                        <div class="description">

                                                        <span class="feature-desc"><p>Great Service ! , SOS came to the rescue me in no time at all and made my day.</p>
    <p>- a customer</p></span>

                                                </div>
                    </div>
                </div>

EDIT 4 >>>>>>

This really is what it's doing

enter image description here