根据水平菜单对齐内容

Question

I am struggling to align content according to horizontal menu. I am using bootstrap grid to make the menu and all items in menu are align to center. I don't know how to make the content below to align with the start of the "Autor" text on the left and end same as the text "Contact" on the right. You can see what I am trying to say on images below. Red is what I have now, Blue is what I want to achieve.

This is my code. Thanks you for you answers.

Filip

<div class="container-fluid main">
<div class="row menu">
    <div class="col-md-1"></div>
    <div class="col-md-2 menu-item nopadding"><a href="autor">A U T O R</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="extracts">E X T R A C T S</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="portfolio">P O R T F O L I O</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="text">T E X T</a></div>
    <div class="col-md-2 menu-item nopadding"><a href="contact">C O N T A C T</a></div>
    <div class="col-md-1"></div>
</div>

<div class="row no-gutters autor">
    <div class="col-md-1"></div>
    <div class="col-md-2 nopadding">
        <img src="images/autor/1.jpg" class="autor-image">
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-6 autor-text nopadding">
        <p>
            Jan Dotřel vystudoval Estetiku se zaměřením na teorii fotografie na FF UK. V roce 2016 diplomoval s prací
            Transformace kultovní a konceptuální hodnoty v dějinách fotografie. Již od prvního ročníku se soustředil
            na fotografickou teorii zastoupenou zejména u autorů jako jsou Geoffrey Batchen, Roland Barthes, Walter Benjamin,
            Jaques Derrida, Georges Didi-Huberman, Michel Foucault, nebo Alan Sekula.
        </p>
        <p>
            .....
        </p>

    </div>
    <div class="col-md-1"></div>
</div>

Answer 1

Try this, use offset columns instead of inserting blank ones.

<div class="col-md-2 col-md-offset-1 nopadding"></div>
<div class="col-md-6 col-md-offset-2 autor-text nopadding"></div>

Answer 2

Remove the empty divs and remove the col-md classes.

<div class="row menu">
    <div class="menu-item nopadding"><a href="autor">A U T O R</a></div>
    <div class="menu-item nopadding"><a href="extracts">E X T R A C T S</a></div>
    <div class="menu-item nopadding"><a href="portfolio">P O R T F O L I O</a></div>
    <div class="menu-item nopadding"><a href="text">T E X T</a></div>
    <div class="menu-item nopadding"><a href="contact">C O N T A C T</a></div>
</div>

And the add flexbox to the menu class

.menu {
    display:flex;
    justify-content:space-between;
}