Move #feature-slider .entry-container, change color of menu and entry container

I found the option for changing the menu color

To clarify, I want the box below the image so that the text is not on top of the image. Kinda like subtext under the image.

Adding the following gives somethign similar to what I’m looking to do with moving the text below the image, but If I do too much, it gets cut off

#feature-slider .entry-container { bottom: -20%; }

That code didn’t seem to work, here is currently what I had

/* Padding around text in slider box*/
#feature-slider .entry-container {
padding: 0;
left: 33%; /* Increase to push text further right */
width: 35%; /* Increase/decrease this % to increase/decrease the width of text. Leave this line out if you do not want to change width */
background: rgba(0, 0, 0, 0.0);

/* works but not well */
/* bottom: -20%; */

}

Even removing my code it seems to make the box move out of a visible area

When I add the code you provide me this happens
https://www.dropbox.com/s/wug92ecppsetpfl/Screen%20Shot%202017-05-03%20at%206.43.59%20PM.png?dl=0
You’ll notice the text is not showing.
If I change the padding to 0px this is what I see
https://www.dropbox.com/s/a4gsup4vp7i9e3y/Screen%20Shot%202017-05-03%20at%206.49.20%20PM.png?dl=0

If it helps, here is the entirety of the custom CSS I have

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

/*
Padding around logo
*/
#masthead, #site-branding { padding-top: 0; padding-bottom: 5; }

/* Adjust Featured Slider’s header font size */
#feature-slider .entry-title {
font-size: 15px;
}
/* Adjust Featured Slider’s content font size */
#feature-slider .entry-content {
font-size: 10px;
}
/* Remove dots */
#feature-slider .cycle-pager {
display: none;
}

/* Padding around text in slider box*/
#feature-slider .entry-container {
padding: 0;
left: 33%; /* Increase to push text further right */
width: 35%; /* Increase/decrease this % to increase/decrease the width of text. Leave this line out if you do not want to change width */
background: rgba(0, 0, 0, 1.0);

/* works but not well */
/* bottom: -20%; */

}

/*
Adjust Logo size
*/
#masthead #site-logo img,
#masthead.fixed-header #site-logo img {
max-width: 60%;
}

/* Center Header */
/*
#site-logo, #site-branding {
text-align: center;
width: 100%;
}
*/
/* Sidebar Header Right */
/*
.sidebar-header-right {
clear: both;
display: inline-block;
float: none;
text-align: center;
width: 100%;
}

#masthead .search-field,
.sidebar-header-right .widget-wrap {
float: none;
}

*/

@media screen and (max-width: 1060px) {
/* Add here css for maximum screen size of 1060px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 14px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 10px; }

}

@media screen and (max-width: 960px) {
/* Add here css for maximum screen size of 960px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 12px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 10px; }
}

@media screen and (max-width: 767px) {
/* Add here css for maximum screen size of 767px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 10px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 8px; }
}

@media screen and (max-width: 480px) {
/* Add here css for maximum screen size of 480px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 10px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 8px; }
}

@media screen and (max-width: 320px) {
/* Add here css for maximum screen size of 320px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 10px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 8px; }
}

/* hide post on homepage */
.home #content { display: none; }

What you have pictured https://www.dropbox.com/s/yt8fyed3b6heoy1/slider-caption.png?dl=0 is exactly what I’m trying to do.
This is what happens when I use just your code
https://www.dropbox.com/s/ixs82n563370w3h/Screen%20Shot%202017-05-06%20at%209.32.30%20AM.png?dl=0

Is this being impacted by my image side or some other setting?

I apologize for the delay, I’ve been on a work trip.

I have just your CSS code added to the page now

My apologies it did not appear to save the update.

I now only have the following code in my additional CSS section

#feature-slider .entry-container {
left: unset;
width: 100%;
position: unset;
padding: 20px;
}