why growl message not dispalying left side of scre

In my project there is a requirement that when we change language from Engish to Arabic all layout will be displayed in right to left position. growl message working fine when i didn't use common layout but when i add this thing in common layout of my page then its still showing right side only..

source code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            .ui-growl{
                #{msg['msg']}:20px;
            }
        </style>
    </h:head>

    <body>

    <ui:composition template="/home/template/common1/commonLayout.xhtml">
        <ui:define name="content">

        <h:form id="myform">


            <p:growl id="msgs" sticky="true" autoUpdate="true" />
            <f:event listener="#{localeControllerBean.islang}" type="preRenderView" />
            <p:outputLabel for="sname" value="#{msg['welcome.jsf']}"
                            styleClass="label" />
                        <p:inputText id="sname" value="#{sponsorBean.sponsor_name}"
                            required="true" requiredMessage="#{msg['welcome.jsf']}"
                            styleClass="input" />
                            <p:commandButton id="submit" value="Save" ajax="false"
                        action="#{sponsorBean.save}" style="margin-bottom:50px;"
                        update="msgs" />
        </h:form>
        </ui:define>
        </ui:composition>
    </body>
</html>

Anything outside <ui:composition> is ignored during building the view.

In your commonLayout.xhtml master template you should add a new <ui:insert> inside <h:head>:

<h:head>
    ...
    <ui:insert name="head" />
</h:head>

Then define it inside the <ui:composition> of your template client:

<ui:composition template="...">
    <ui:define name="head">
        <style>.ui-growl{ #{msg['msg']}: 20px; }</style>
    </ui:define>

    <ui:define name="content">
        ...
    </ui:define>
</ui:composition>

(by the way #{msg['msg']} is absolutely not self-documenting; I'd myself also rather have used <html dir="#{direction}"> so that you can just use e.g. html[dir='rtl'] .ui.growl selector)