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

General Discussion

Posted by davidreyes2
davidreyes2
3,422 Points

Why is there a scroll bar going to the right and left?

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="home.css"> <link href='http://fonts.googleapis.com/css?family=Orbitron:700' rel='stylesheet' type='text/css'> <title>Portfolio</title>

    </head>
    <body>
        <header>
            <div class="logo">
            <h1><a href="index.html"><img src="img/logo.jpg"></a>
            <h1>Mossart Music</h1>
            </div>
            <nav class="menu">
                <ul>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="index.html">Home</a></li>
                </ul>
            </nav>
            <h2>Alex Moss</h2>
            <h2>Portfolio</h2>
        </header>
        <div class="container">
        <section class="portfolio">
            <ul>
                <a href="https://www.youtube.com/watch?v=3mLRN3mw_AQ">
                <li>
                    <iframe class="video" width="420" height="315" src="http://www.youtube.com/embed/3mLRN3mw_AQ"></iframe>
                    <p>Mula</p></a>
                </li>
                <a href="img/image2.jpg">
                <li>
                    <iframe class="video" width="420" height="315" src="http://www.youtube.com/embed/HVBJ6DruizA"></iframe>
                    <p></p></a>
                </li>
                <a href="img/image3.jpg">
                <li>
                    <iframe class="video" width="420" height="315" src="http://www.youtube.com/embed/1U8UA9-eNlQ"></iframe>
                    <p></p></a>
                </li>
                <a href="img/image4.jpg">
                <li>
                    <p></p></a>
                </li>
        </section>
        </div>
    </body>
</html>
  • { margin: 0 auto; }

body { text-align: center;

}

img { max-width: 100%; }

/********************************** Logo **********************************/

.logo h1 { font-family: 'Orbitron', sans-serif; background-color: #000000; text-align: center; color: #ffffff; width: 100%; padding-bottom: 6%; }

.logo img { float: left; width: 13%; padding: 0; }

ul { text-align: center; list-style-type: none;

}

li { }

/************************************** H2 **************************************/

h2 { font-family: 'Orbitron', sans-serif; clear: both; margin-bottom: 10px; padding-bottom: 10px; }

/************************************** Menu **************************************/

.menu ul { background-color: #2d3535; width: 100%; float: right; }

.menu li { padding: 10px 10px; margin-left: 30px; float: right; display: inline; }

.menu a { font-family: 'Orbitron', sans-serif; color: #fff; width: 100px; text-decoration: none; }

/************************************** Videos **************************************/

.video { width: 100%; }

/************************************** Portfolio Videos **************************************/

.portfolio ul { width: 100%; float: left; margin-left: 5%; }

.portfolio li { float: left; margin-right: 132px;

}

I'm not sure why there is a sidebar, it's quite annoying. I've tried deleted things, but it just won't go away. Do you know what I can do?

Thanks in advanced.

2 Answers

Frank Sherlotti
PLUS
Frank Sherlotti
Courses Plus Student 1,952 Points
Frank Sherlotti
Frank Sherlotti
Courses Plus Student 1,952 Points

If you go into view in workspaces and check Word Wrap, every time the line gets to long it should automatically go to the next line for you so you don't have it scrolling across the screen.

davidreyes2
davidreyes2
3,422 Points
davidreyes2
davidreyes2
3,422 Points

Not on workspaces, this is occuring on the browser. If you copy and paste the code into an editor and then preview it, you will notice a scrollbar to that goes right and left.