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
Kenneth Myers
16,009 PointsIssues with <h1> on my browser
Before I begin I already fixed my problem but I wanted to know why I had the problem in the first place. I'm using chrome and the text of every h1 element was becoming shifted because it was conflicting with the button and select elements which wasn't happening in the video. I played around with it a bit and eventually fixed it by setting the top margin to 50px instead of 40px. Does anyone know why these elements would be conflicting for me? I hadn't changed any of the css in this project until this point.
4 Answers
Codye Watson
16,835 PointsI had the same problem. The issue was not a reset. The project files have set a reset in the CSS:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
This means it reset all styles and h1 had a custom CSS styling in the project files:
h1 {
margin: 40px 0 10px;
text-align: center;
color: #384047;
}
So this was not a CSS reset issue, but an issue with the custom styling in the project files.
Thank you for sharing your fix Kenneth.
Gavin Ralston
28,770 PointsDragging this up from a while ago, but it was an issue for me, too.
Any chance this is related to the margins in the css being set in px, and instructor videos typically being done on displays with really high pixel density (and the accompanying adjustments that get made so pages don't get compacted to the point of being unreadable)?
Codye Watson
16,835 PointsThat's actually a good point Gavin. I didn't think about displays with high pixel densities. That could be the culprit.
shezazr
8,275 Pointsis there a reset.css file? if not that would explain it as each browser has its own defaults which you can get at by using inspect element.. Google & use this to find out if you do indeed have the reset.css
Dylan Macnab
24,861 PointsThere is default browser margin and padding on Heading elements which can cause unwanted shifts. I definitely had issue with this at first. A couple ways you can work around this are:
- Use a CSS reset -- which removes default padding and margins
- You can set your own custom padding and margin for headers
Good luck!
Lance McCormick
7,553 PointsId like to include my fix for this. I noticed that the select element is being floated to the left and the button element is being floated to the right in the CSS code. My H1 element was not centering correctly because of this, it was trying to wrap around these floated elements. Under the H1 CSS code I cleared both sides of floats ( clear: both; ) and refreshed the page, the issue was fixed, the H1 element was centering properly again because now it could sit on its own block level.
Ashley Clifton
18,921 PointsI had this problem too and noticed the same thing -- that it was a float issue. I assumed I must have done something wrong with my jquery though because I'd never had to fix something like that that the tutorial didn't have me fix/wasn't a problem in the video. Glad I'm not the only one. Clear: both worked perfectly.
john larson
16,594 Pointsjohn larson
16,594 PointsI also wondered the same thing abut H1. As did other people concurred it was the float issue. My solution was to remove the float, change the width of select to 100px (cause I didn't like that long select for just one word of content) and then I used margin: 15px auto; to center it. For my tastes, I like it better that way.