my bootstrap styles won't render my mobile styles - css

Question

my bootstrap mobile style won't render unless I add a extra closing brace to the end can someone tell me what I did wrong
this is the styles that I created and they should work but they are not working and they pass the validator test.
#media only screen and (max-width: 766px){
.movie{
width:300px;
height: 300px;
margin:0;
padding:0;
}
body > div > div > h3 {
margin-left: 300px;
padding-top: 200px;
}
a:link {
outline: 0;
font-size: 9px;
display: block;
padding-right: 50px;
}
h3{
font-size: 20px;
margin-top:20%;
}
h3.port {
margin-left: 150px;
color: #9932CC;
margin-top: 50px;
}
img {
float: left;
margin-right: 15px;
width:50%;
height:50%;
margin-top:0;
}
p {
margin-left: 10px;
margin-top:5%;
padding: 0;
color: #9932CC;
font-size: 15px;
}
.navbar .nav > li > a {
color: #9932CC;
}
body > div > div > a > img {
display: none;
}
.navbar-brand {
float: left;
padding: 10px 15px;
font-size: 20px;
}
/* twitter
====================================== */
div#iPhone {background: url("../images/iphone.png") no-repeat;
width:275px;height:500px;
display: inline-block;
padding-top: 90px;
padding-left:2em;
margin-left: 0px;
}
iframe#twitter-widget-0.twitter-timeline[style] {width:70px !important;}
div#iPhone iframe[id^="twitter-widget-0"] {min-width:170px !important;
margin-right: 20px;
}
/* iframe
======================================= */
.movie {
text-align: center;
width: 350px;
height: 345px;
margin-left: 0px;
margin-right: 200px;
}
.paragraph {
width: 50px;
margin-left: 10%;
}
.thumbnail {
color: #333;
margin-left: 100%;
width: 100%;
background-color: transparent;
border:0px;
}
.btn-primary {
color: #000;
background-color: #aff6b8;
border-color:black;
margin-top: 5%;
width:100%;
}
}
}

Answer 1

mobile style won't render unless I add a extra closing brace to the end
Yes, the #media syntax involves an extra set of braces:
#media only screen and (max-width: 766px) {
element {}
}
The last closing brace you added is equivalent to the last one in the code above.