Div centered for some reason

So I’ve been slowly piecing my way through one of the tests. I’ve had quite a bit of trouble along the way, but am feeling more confident as time goes on. The problem I’m having now is, that one of my

's isn’t lining up correctly. After the services section it strarts aligning to the bottom of my boxes, I want it to look similar to the “about us” section. I’m pretty sure it’s a simple formatting or structural error, but I can’t seem to figure it out


Are you talking about the submit button?
Never mind ^^

Perhaps style the div so that it has a shape. Maybe add width:100%; as a styling rule. Maybe Instead of using the center element, style that div using text-align:center;

Create a class for that div and style it accordingly and see if that helps

Tried your suggestion, I just made a class with a width of 100% and plugged it into the div, and got nothing. still trying though

Ok so after digging around through your code, i think there is something wrong with your CSS, i commented out all of your CSS and your page looks like everything is behaving as it should. Haven’t actually tracked down the root cause.

I did notice that the sample div was showing up outside of the body along with the 3 boxes containing music, video, and design. So, with that being said, I would have a hard look at your CSS and continue troubleshooting from there.

Also, just some things that i found, the 3 <.br>'s that you used to space out your navbar from the rest of the page is not how you should space out the 2 elements. That should be done in CSS with margin/padding. Also, i would eliminate the use of the <.center> element as i believe that is obsolete. Again centering text is as simple as assigning text-align:center in CSS.

Furthermore, to aid in troubleshooting things I would put small borders around a lot of major boxes to get an idea of the amount of space something is taking up as well as positioning. I will still help as I can if you run into anything

Thanks for your reply! I have a feeling the navbar at the top isn’t set up right. The reason I added the breaks was because I had tried using pading in my CSS but the bar moved with everything else, so visually speaking the br’s seemed to fix that. I also notice the bat its self won’t sit flush in the corner either making things look a little janky.

So you can fix the navbar bar adjusting the margin-top:-10px; seem to work although i didn’t really take too much time to work with it.

Also, i found the culprit of why everything looks bad after the 3 boxes, you are missing a closing div tag after the closing form tag right after the video box, just before samples. Because of this, the open div tag for video’s had a class of “box” that was adding the same styles to the entire sample div which explains why your sample box was centered and the exact same width as your service boxes. Don’t forget to close every tag that you open

I knew it had to be something simple! Thank you! I have classes set up now, and its looking a lot better now, even got the navbar nice and squared up.

Sweet! Great to hear, glad I could help :slight_smile:

To make the nav sit flush you have to remove the default margin on the body (you don’t need the negative margin on .navbar).

body {
  margin: 0;
  1. Press the down arrow to the right of the HTML code box and select “Analyze HTML”.

  2. Remove the body and html elements you don’t need them on Codepen.

  3. Remove the two form tags you still have, you don’t need them where you are using them.

  4. Fix the <a> elements by removing button and onclick="#". You have button as an attribute on the <a> element but you also have the closing button tag. You don’t need the onclick.

From this:
<a button onclick="#" class="button" href="#">Submit</a></button>

To this:
<a class="button" href="#">Submit</a>

  1. Remember to add the ids needed to your elements so the test can check for them.