Responsive WordPress feature box causing two issues - html

Question

I created a feature box on my WordPress development site. With some help I made the feature box responsive and it's almost finished. You can see this feature box displaying properly in the below screenshot
However, I have two issues:
1) When I reduce my browser window in size, the navbar turns expands onto two lines and covers my feature box (pictured). I want the feature box to move down as the navbar expands.
2) On my phone the red ribbon in my feature box expands beyond the width of the page and causes the navbar to display incorrectly (pictured). I don't want the red ribbon to expand beyond the width of my navbar.
I created the navbar using CSS and an image. Using CSS, I created a large red rectangle that expands beyond the margin of my feature box. I then used an image of a red triangle and positioned this beneath the red rectangle. You can see how I did this by looking at "#text-4" in my CSS.
My relevant CSS is
.featured-box {
border-radius: 20px;
background-color: #000;
color: #fff;
padding: 20px;
margin: 0 auto;
margin-top: 10px;
overflow: visible;
width: auto;
max-width: 1160px;
}
.featured-box h4 {
font-size: 20px;
color: #fff;
}
.myimage {
float:right;
}
.featured-box p {
padding: 0 0 20px;
}
.featured-box ul {
margin: 0 0 20px;
}
.featured-box ul li {
list-style-type: disc;
margin: 0 0 0 30px;
padding: 0;
align: right;
}
.featured-box .enews p {
padding: 10 10 10 10px;
color: #fff;
float: left;
width: 220 px;
margin: 10 10 10 10px;
}
.featured-box .enews #subscribe {
padding: 20 20 20 20px;;
}
.featured-box .enews #subbox {
background-color: #fff;
margin: 0;
width: 300px;
}
.featured-box .enews .myimage {
float: right;
margin-left: 10px;
margin-right: 50px;
width: auto;
}
section.enews-widget {
overflow: hidden;
}
.featured-box .enews input[type="submit"] {
background-color: #d60000;
padding: 10 10 10 10px;
width: 150px;
}
#media screen and (min-width: 1140px) {
div.featured-box {
margin-top: 10%;
}
}
#media only screen and (max-width: 767px) {
section.enews-widget {
clear: both;
}
.myimage {
float: none;
}
.myimage img {
display: block;
height: auto;
margin: 0 auto;
}
}
#text-4 > div:nth-child(1) > h4:nth-child(1) {
color: #fff;
font-size: 1.3em; font-weight: normal;
text-transform: uppercase;
background-color: #d60000;
position: relative;
margin: 0px -60px 20px -20px;
padding: 18px 0px 16px 20px;
}
#text-4 > div:nth-child(1) > h4:nth-child(1):after {
content: '';
display: block; height: 40px; width: 40px;
background: url(http://bryancollins.eu/wp/wp-content/uploads/2014/04/fold.png) no-repeat 0 0;
position: absolute; right: 0px; bottom: -40px;
}
.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.widget li {
margin: 0;
padding: 2px 0px 8px 35px;
display: inline; position: relative;
border-bottom: none;
}
.featured-box .widget li {
list-style: none;
background: url("http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
display: inline;
margin: 0 0 0 30px;
padding: 0 0 0 40px;
}
My HTML:
<div class="featured-box widget-area">
<section id="text-4" class="widget widget_text">
<div class="widget-wrap">
<h4 class="widget-title widgettitle">
Get this for free
</h4>
<div class="textwidget">
<div class="myimage">
<img src="http://bryancollins.eu/wp/wp-content/uploads/2014/04/Book-cover.png"></img>
</div>
</div>
</div>
</section>
<section id="enews-ext-3" class="widget enews-widget">
<div class="widget-wrap">
<div class="enews">
<h4 class="widget-title widgettitle">
33 Creative Strategies for your next writing proje…
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing…
</p>
<div class="arrows">
<ul>
<li>
List item 1
</li>
<li>
List item 2
</li>
<li>
List item 3
</li>
</ul>
</div>
<p>
Tuo vero id quidem, inquam, arbitratu. Illud mihi …
</p>
<form id="subscribe" name="33 Creative Strategies for your next writing project" onsubmit="if ( subbox1.value == 'First Name') { subbox1.value = ''; } if ( subbox2.value == 'Last Name') { subbox2.value = ''; }" target="_blank" method="post" action="<!-- Begin MailChimp Signup Form --> <div id="mc_embed_signu…s="button"></div> </form> </div> <!--End mc_embed_signup-->"></form>
</div>
</div>
</section>
Thanks for the help.

Answer 1

Fix for 1.) Needed to increase top margin between 1024px and 1140px can be more or less than 14% but looks ok at 14!
#media screen and (min-width: 1024px) and (max-width: 1140px) {
div.featured-box {
margin-top: 14%;
}
}
User fixed with margin-top 130px.
Fix for 2.)
Try adding 'overflow: hidden' to the same media query:
#media screen and (min-width: 1024px) {
div.featured-box {
margin-top: 130px;
overflow: hidden;
}
}

Answer 2

For your first issue, on "desktop size" your featured box has a margin-top of 10%, but then once you resize below 1040px, the featured box takes on the default CSS which has a margin-top of 10px and the navigation has fixed positioning meaning that the featured box margin top is from the top of the window, not from below the navigation.
To resolve this, you can change the default CSS to use a percentage for the top margin, however I would advise using relative positioning and using pixels to set the margin. Another option is to increase the breakpoint so that the "mobile" navigation replaces the default navigation as soon as it beings to wrap.
For your second issue you can either set "overflow:hidden;" on the containing div or you can set the maximum scale to 1 with a viewport meta tag(mobile), I'd advise doing both:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">