[solved] Why did I have to use width but he didn't?

1

So I’ve been looking at other projects to better my own.
I noticed @Leo uses a heading and button setup similar to mine but he doesn’t have to use…

width: x%;

…like I do to center his row, in fact he doesn’t need even half the stuff I use in my buttonSpacing class (CSS line 17) . He uses one ‘div’ for all his buttons (HTML line 6) (should I do that instead of giving each of them they’re own ‘div’s’ then putting those in one ‘div’?) and the class only uses a ‘margin’ change (CSS line 7).

So how was he able to that? is it because he didn’t put them into their own ‘divs’? I put each button in it’s own ‘div’ so I could grid them for md to smaller screens.

@Leo’s protfolio:


@Zip’s portfolio:
https://codepen.io/AmericanPi/pen/KyzYwr

tx guys

2

bumping for some help.

3

From a glance, he is using text-align and allowing the div to take up 100% of the parent div

<div style="text-align:center;" class="buttonnav"> <!-- he set the inline style to have text-align -->
    <a href="#about">
     <button class="btn-lg btn-default" id="toggle">
       <h3>About</h3>
  </button>
    </a>
 <a href="#projects">
    <button class="btn-lg btn-default">
    <h3>Projects</h3>
  </button>
    </a>
    <a href="#contact">
  <button class="btn-lg btn-default">
    <h3>Contact</h3>
  </button>
    </a>
    <a href="#social">
  <button class="btn-lg btn-default" >
    <h3 > Social</h3>
  </button>
    </a>
  </div>
</div>

By default, the child div will take as all the width of its parent as long there isn’t another sibling div.

Let me know if you need more details. :slight_smile:

1 Like
4

What is the parent element here? I can’t see it on my phone right now.

5

And tx @DanStockham. Forgot to mention.

6

The parent element would be the surrounding div with the class selector row

<div class="row">
  <div style="text-align:center;" class="buttonnav">
    <a href="#about">
     <button class="btn-lg btn-default" id="toggle">
       <h3>About</h3>
  </button>
    </a>
 <a href="#projects">
    <button class="btn-lg btn-default">
    <h3>Projects</h3>
  </button>
    </a>
    <a href="#contact">
  <button class="btn-lg btn-default">
    <h3>Contact</h3>
  </button>
    </a>
    <a href="#social">
  <button class="btn-lg btn-default" >
    <h3 > Social</h3>
  </button>
    </a>
  </div>
</div>
1 Like
7

Got it. That’s a nifty trick. Tx @DanStockham.

8

No problem! Now go get’em tiger!

1 Like
9

…ROTFL…
I really needed that!