Best approach for horizontal slider CSS

Question

I'm making a slide scrolling site that goes to a specific section on button click (or scroll). The idea is on the main page when you hit a button it translateX's left or right depending on the section.

How you would lay out the CSS so that each section is inline with 100vh and 100vw. Right now it seems that in between each section theres a 100vw of empty space. The end goal is that the .main section is the first section you see on load and the can either scroll or, ideally, the buttons (you can see the onclick fuctions I'm working on) can let you traverse the site. But wont do that till later. Need to work on the css.

#all-sections{
    display:inline-flex;
}
.main, .about, .professional, .fun-stuff, .blog, .contact{
height:100vh;
position: relative;
display:block;
width:100vw;
}

.main{
    background-color:white;
    transform: translateX(0%);
}

.about{
    background-color:red;
    transform: translateX(-100%);
}

.professional{
    background-color:purple;
    transform: translateX(-200%);
}

.fun-stuff{
    background-color:black;
    transform: translateX(+100%);
}

.blog{
    background-color:blue;
    transform: translateX(+200%);
}

.contact{
    background-color:rgb(1, 235, 21);
    transform: translateX(+300%);
}

<section id="all-sections">
<section class="main">
<header>
<ul id="menu-list">
    <button onclick="toAbout()" id="about">About</button>
    <button onclick="toProf()" id="professional">Professional</button>
    <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>
    <button onclick="toBlog()" id="blog">Blog</button>
    <button onclick="toContact()" id="contact">Contact</button>
</ul>
</header>
</section>

<section class="about"></section>

<section class="professional"></section>

<section class="fun-stuff"></section>

<section class="blog"></section>

<section class="contact"></section>

Answer 1

Since the positions of each section are already set to relative, meaning they will be positioned relative to the previous section, you could just set each section to have left: 0 so they will start one after the other.

* {
    margin: 0;
}

#all-sections{
    display:inline-flex;
}
.main, .about, .professional, .fun-stuff, .blog, .contact{
    height:100vh;
    position: relative;
    left: 0
    display:block;
    width:100vw;
}

.main{
    background-color:white;
}

.about{
    background-color:red;
}

.professional{
    background-color:purple;
}

.fun-stuff{
    background-color:black;
}

.blog{
    background-color:blue;
}

.contact{
    background-color:rgb(1, 235, 21);
}

<section id="all-sections">
<section class="main">
<header>
<ul id="menu-list">
    <button onclick="toAbout()" id="about">About</button>
    <button onclick="toProf()" id="professional">Professional</button>
    <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>
    <button onclick="toBlog()" id="blog">Blog</button>
    <button onclick="toContact()" id="contact">Contact</button>
</ul>
</header>
</section>

<section class="about"></section>

<section class="professional"></section>

<section class="fun-stuff"></section>

<section class="blog"></section>

<section class="contact"></section>

If you want the navigation bar to always be visible, you could set that element specifically to position: fixed and it will not move as it scrolls.

#menu-list {
    position: fixed;
    z-index: 9999;
}

* {
    margin: 0;
}

#all-sections{
    display:inline-flex;
}

.main, .about, .professional, .fun-stuff, .blog, .contact{
    height:100vh;
    position: relative;
    left: 0
    display:block;
    width:100vw;
}

.main{
    background-color:white;
}

.about{
    background-color:red;
}

.professional{
    background-color:purple;
}

.fun-stuff{
    background-color:black;
}

.blog{
    background-color:blue;
}

.contact{
    background-color:rgb(1, 235, 21);
}

<section id="all-sections">
<section class="main">
<header>
<ul id="menu-list">
    <button onclick="toAbout()" id="about">About</button>
    <button onclick="toProf()" id="professional">Professional</button>
    <button onclick="toFun()" id="fun-stuff">Fun Stuff</button>
    <button onclick="toBlog()" id="blog">Blog</button>
    <button onclick="toContact()" id="contact">Contact</button>
</ul>
</header>
</section>

<section class="about"></section>

<section class="professional"></section>

<section class="fun-stuff"></section>

<section class="blog"></section>

<section class="contact"></section>