Hi guys,

I don't know why, although most of the responsive changes that Nick taught are working well, I have a few issues:

When I modify the navigation and make it float to the right, it works, however the navigation does not remain as a line when I reduce the size of the window (towards mobile size). In fact, it stays on the right but it becomes a block, when the window gets reduced

Moreover, Nick manages to get the logo go on top of the Navigation when he reduces the size of the window, but it does not seem to work either for me…

Similarly, when Nick reduces the size of his window on the contact page, the profile picture goes above the text, but mine stays on the left.

Here is the code I've typed on the Responsive CSS page, maybe someone can help me on this:

@media screen and (min-width: 480px) { /*************************** Two Column Layout ****************************/

#primary { width: 50%; Float: left; }

#secondary { width: 40%; float: right; }

/*************************** Pqge: Portfolio Page ****************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

/*************************** Pqge: About ****************************/

.profile-photo { float: left; margin: 5% 10% 100px 0; }

@media screen and (min-width: 660px) {

} /*************************** Pqge: Header ****************************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

logo {

float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 20px;

}

header { border-bottom: 5px solid #599a68; margin-bottom: 60px;

}

The code I've typed on my main CSS is the following: (in case it can help solve the issue)

/*************************** Heading ****************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; Font-Size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/*************************** Navigation ****************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0px 10px; padding: 0px; text-align:center; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/*************************** PAGE: ABOUT ****************************/

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 20px; }

Many thanks for any help provided! Cheers!