Add space between aui:row

As you can see in the image, there are no space between the border and the top of the <aui:container>.

I have already try different method to add spacing by css like padding or margin, but nothing happend.

Could you help me to add space where the arrows point in the image ?

Thank's

Here the jsp file :

<%@page import="xxx.CreatePortlet"%>
<%@ include file="init.jsp"%>
<html>
<body class="borderBlackOne">

    <div class="bottomLine" id="MainTitle" style="text-align: center">
        <h1>Créer une REP</h1>
    </div>

    <aui:form action="<%=updateRepAction%>" method="post" id="updateForm" name="<portlet:namespace/>updateForm">

        <aui:fieldset>

            <aui:container cssClass="borderBlackOne">

                <aui:container cssClass="paddingTop"> <!-- Don't work -->

                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.nameLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:input cssClass="" name="repName" required="true" label="" type="text" value="" />
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Nom de l'auteur -->
                <aui:container>
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.authorNameLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <span class="fill">${authorName}</span>
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Commentaire -->
                <aui:container cssClass="">
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.comentaryLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:input cssClass="" name="comentary" label="" type="textarea" value="" />
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Configuration services -->
                <aui:container>
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.ServiceLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:container cssClass="borderBlackOne">
                                <aui:row>
                                    <aui:col cssClass="alignRight" width="<%=25%>">
                                        <span class="bold black"><liferay-ui:message
                                                key="manage.rep.servicesLabel" /></span>
                                    </aui:col>


                                    <aui:col width="<%=75%>">
                                        <aui:input name="comentary" label="" type="textarea" value="" />
                                    </aui:col>
                                </aui:row>
                                <aui:row>
                                    <aui:col cssClass="alignRight" width="<%=25%>">
                                        <span class="bold black"><liferay-ui:message
                                                key="manage.SystemeLabel" /></span>
                                    </aui:col>


                                    <aui:col width="<%=75%>">
                                        <aui:input name="comentary" label="" type="textarea" value="" />
                                    </aui:col>
                                </aui:row>
                            </aui:container>
                        </aui:col>
                    </aui:row>
                </aui:container>
                <aui:button-row cssClass="alignRight">
                        <aui:button type="cancel" value="Annuler"></aui:button>
                        <aui:button type="submit" value="Ok"></aui:button>
                </aui:button-row>
            </aui:container>
        </aui:fieldset>
    </aui:form>
</body>
</html>

And here are the css file :

/* Don't work */
.create .paddingTop {
    margin-top: 5%
}

/* Don't work */
.create .paddingBottom {
    margin-bottom: 25px;
}

/* Don't work */
.create .marges {
    margin: 25px 0px 50px 0px;
}

.create .black {
    color: black;            
}

.create .bold {
    font-weight: bold;
}

.create .alignRight {
    text-align: right;
}

.create .borderBlackOne {
    border: 1px solid black;            
}

Solution

aui:container and aui:row generate HTML div element, therefore margin-x should work. I think, the problem might be with the CSS selectors you have defined or they may be conflicting.

Try:
1. Adding !important after the CSS properties (e.g. margin-top: 5% !important;). OR
2. Remove .create from CSS selectors. OR
3. Both 1 & 2.