Button jumps down for no reason

Button jumps down for no reason
0.0 0

#1

Hey guys, I need your help.
I’m making one of the challenges for FreeCodeCamp, but I’m stuck on a problem.
I created 3 buttons and placed them in the same row with Bootstrap classes.
I also gave them the same space within that row.
But now, for some mysterious reason, one of the buttons is placed a little below the line and I can’t figure out how to fix it.
Can someone help me with this?

Here’s the code of the buttons plus the lines above and below it:
```

Portfolio of a programmer

`
  <div class="row">
    <div class="col-md-4"><a href="#about"><button class="btn btn-primary btn-block">About me</button></a></div>
    <div class="col-md-4"><a href="#portfolio"><button class="btn btn-primary btn-block">Portfolio</button></a></div>
    <div class="col-md-4"><a href="#contact"><button class="btn btn-primary btn-block">Contact me</button></a></div>
  </div>
   
 </div>
  <div style="background-color: green">
 <h2 id="about">About me</h2>

And here’s a picture of what happens:


#2

Hello, I am also a beginner too but try this in css

.col-md-4 {
  display: inline-block;
  
}

#3

Just before

line you have added an extra
remove it. I hope it will work fine, I am adding a codepen link make you understand better.

Remove all the inline css from codepen example & ENJOY coding…:slight_smile:


#4

Thanks, your code works, mine doesn’t, so i just copied and pasted your code and now it all works just fine. I can’t find the difference though.


#5

Sorry to bother you, but what exactly did you fix in the original code?


#6

The main code asked was some missing open div and extra closing div. Tally the code with code I have provided you. [Follow the opening DIV & Closing DIV properly]


#7

Ah, I saw that but I thought he missed mentioning the opening div in the provided code. Thanks for clarifying.


#8

As a beginner I would recommend to code slowly and detect vulnerabilities among your code. That’s how you ensure “code security”. You can also use a app to do that. I know one called Checkmarx if you want to try.
Good luck!


#9

Try deleting your button elements and giving the Bootstrap button classes to the a elements instead (this will make your links look like buttons). Let me know if this solves your problem.

EDIT: Just noticed someone pointed out you have an extra closing </div> tag. This could be the source of the problem.