Overlay text forced out of containing div - css

Question

I've tried this yesterday and it worked fine for me, it's basic enough, I just want to have a few lines of text overlay a background image (at 'nk'). Somewhere something has gone wrong - when the background image is at full size (which only seems to be possible by adding a png transparent image - full height not full width - to 'fill' it out) then the text seems to be forced from the containing div and its background image.
I'm using a drag and drop builder called Visual Composer, in this you can work with rows - .histy is the class I've attached to the problem div/row
and here is the page with the text problem:
http://dbtest.destinationballybunion.ie/?page_id=2755
Any ideas why now the text is being forced out of the containing div ? Thanks.
CSS for this page:
#container {
margin: 0%;
}
#container text area {
margin: 5%;
}
wrapper {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
entry {
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
padding: 0px;
}
entry-header.style {
position: absolute;
left: -9999px;
}
.entry-content a img,
#attachment-nav a img {
max-width: 98.5%;
padding: 0%;
box-shadow:0 0 3px #EEE;
background:#FFF;
border:#EEE 1px solid;
}
.entry-title {
display:none;
}
.single .entry, .page .entry, .error404 .entry {
margin-bottom: 5.1% !important;
padding: 0;
}
#site-title {
height:100%;
width:100%;
}
#site-title, #site-description {
line-height: 100%;
}
#site-title {
margin: 0 0;
}
#site-title img {
margin: 0;
}
#site-title img {
padding: 0;
}
#access {
background: url('http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/03
/HISTORY-MENU-TOP.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-size: cover;
}
.histy {
background: url('http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/06
/HISTORY-1-NT.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-size: contain;
}
.tourguides {
margin-top: 20px;
}
.walkback {
background-size: 100% 100%;
}
.walktrans {
height:100%;
width:100%;
}
.walktext {
background-color: transparent;
}
.walktext {
margin-top: 2.0vh;
}
.walktext p {
font-size: 24px;
font-size: 2.8vw;
}
.walktext p {
padding-left: 0.8vw;
padding-right: 2.5vw;
}
.walktext a {
color: #BD8346;
}
.walktext a:hover {
color: #827265;
}
.trailmenu h4 {
font-size: 23px;
}
.trailmenu h4 {
overflow: auto;
}
.trailmenu h4 span {
padding-top: 0px;
padding-right: 3px;
}
.trailmenu h4 span{
display: block;
float: left;
}
.trailmenu h4 img{
float: right;
padding-top: 10px;
}​
.trailmenu h4 img {
vertical-align:text-bottom;
}
h5 {
font-size: 21px;
}
h5 {
overflow: auto;
}
h5 span {
padding-top: 0px;
padding-right: 3px;
}
h5 span{
display: block;
float: left;
}
h5 img{
float: right;
padding-top: 20px;
}​
h5 img {
vertical-align:text-bottom;
}