Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Kayla Pasciullo
seal-mask
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points
Posted by Kayla Pasciullo
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points

nav/background image appear larger than other pages on my site

can anyone spot an error in my html that would cause this pages navbar/ background image to appear larger than the other pages on my site??

<!DOCTYPE html>
<html>

<head>
    <script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="aboutstylesNEW.css">
    <title>Kayla Pasciullo - Web Developer</title>
        <meta charset="UTF-8">
        <meta name="description" content="Freelance web developer">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Kayla Pasciullo">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
</head>

<body>
    <header>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">home</a></li>
                <li><a href="about.html">about</a></li>
                <li><a href="projects.html">projects</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="wrapper">
  <h1>meet Kayla</h1><br><h2>&lt;happiness hacker&gt;</h2>
    <img class="kayla" src="kayla2.jpeg" alt="image of kayla">
    <div class="main-content">
   <p style="line-height: 1.75;
    padding: 25px;
    margin: 25px;
    font-size: 18px;">
    I am a front end web developer living in the beautiful Okanagan Valley of B.C. Canada. My current focus is designing and coding functional, responsive landing pages for small or local businesses using HTML and CSS. I take pride in writing well designed, efficent code to build websites from concept all the way to completion. 
   <br><br>I am skilled in web programming, with an in depth knowledge of HTML and CSS. I am an agressive problem solver who loves a challenge. I am always looking to learn or try something new! When I am not busy coding I am usually hanging out with my friends or family at a lake, beach or if I am lucky at camp &hearts; 
<br><br>If your a business looking for a website, or an employer looking to hire <a href="mailto:kayla.pasciullo@hotmail.com">&#9993; email me</a></p>
   </div>
</div>
</body>
</html>
'''

1 Answer

John Maxwell
John Maxwell
9,249 Points
John Maxwell
John Maxwell
9,249 Points

I don't see anything that pops out, have you tried inspecting the different pages to see if there is any difference using Chrome Dev Tools?

Kayla Pasciullo
seal-mask
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points
Kayla Pasciullo
.a{fill-rule:evenodd;}techdegree
Kayla Pasciullo
Front End Web Development Techdegree Student 8,325 Points

the weird thing is it looks fine in the dev tools... its only when I pull it up on my iphone 6plus that its all messed up.. which worries me about all my future websites!!? so now I don't know how to fix the background, and I don't know why my dev tools are misleading me