Search code examples
htmlcssbulma

Text alignment in <aside> and <main>

I've got 2 main sections on my website, aside and main both inside Bulma columns class. And my problem here is headings are not aligned and I can't figure it out how to align them

IMG showing the problem https://i.sstatic.net/fLJmH.png

HTML:

<div class="columns">
<aside class="menu is-narrow sidebar">
<h3 class="title boxed-section-title is-4">Technologies</h3>
</aside>
<main class="column" role="main">
<h3 class="title boxed-section-title is-4">Job offers</h3>
<main>

CSS:

.boxed-section-title.title {
    margin-bottom: .5rem;
}
Solution

  • If you mean that your headings are not vertically aligned, that's because of padding applied to main element because of column class which you've not to aside.

    All you've to do is to apply column class to aside as well.

    Here: https://codepen.io/anon/pen/dLrojp