I created a mobile view navigation that appears correctly on two out of three pages. It spans the full 100% width as intended, but on one page it extends beyond that and causes the layout to look distorted due to the larger navigation bar. I'm not sure why this is happening because the CSS should be consistent across all pages, and I have verified that the links are properly placed in the HTML.
You can visit the website at:
The issue occurs only in the contact section when viewed in mobile [responsive] mode. You will notice that there is horizontal scrolling available, indicating that there is extra space for some unknown reason.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_header">
<div class="header_wrapper">
<p class="main_title"><a href="index.html">Rafael Caba</a></p>
<nav class="main_nav">
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header> <!-- end of header -->
<div class="container">
<section class="contact_content">
<article>
<p class="contact_title">Contact</p>
<p class="about_name">Rafael Caba</p>
<p class="about_webdev">Web Developer</p>
<p class="about_webdev">New York, NY</p><br>
<p class="about_email"><span>Email:</span> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5220333e223a313c2b122b333a3d3d7c313d3f">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6e7d706c747f72655c657d747373327f7371">[email protected]</a></a></p>
</article>
</section> <!-- end of section -->
</div> <!-- end of container -->
<footer>
<div class="footer_wrapper">
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</footer> <!-- end of footer -->
</body>
</html>
@media screen and (max-width:640px){
.container{
width:100%;
}
.main_header{
width:100%;
}
.main_nav{
background:#000000;
width:100%;
margin:0;
height:80px;
}
.header_wrapper{
width:100%;
}
.main_content{
width:100%;
}
.about_content article{
width:90%;
margin:10px;
}
.contact_content article{
margin:10px;
}
}