Need assistance with structuring a navbar-CodePudding

I recently started developing my own website and I require some help from people who are more advanced in CSS and HTML. I am struggling with navbar alignment. I want my middle part as in "beginning" "about me" and "statistics" to be exactly in the middle. "Objectives" and "contact" to the right, logo to the left. Main problem is that I can't figure out how to perfectly align everything so the distance between left and right remains the same, as well as the middle part of the navbar. And yes, I am trying to make the website responsive so it looks good on every device. My end goal is to make an awesome portfolio site that also showcases my skill a little. I also haven't used bootstrap but I included it in my code. Sorry for a long text, I am very new to this so it's hard for me to describe the problem. My code is also very messy so if anyone has time to correct/give feedback, I would really really appreciate that.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <title>Live like legends</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="javakood.js"></script>
</head>
<body>
    <nav >
    <!-- <input type="checkbox" id="check"> 
        <label for="check">
        <i ></i>
        </label>
                                                -->
        <div >
            <img src="./veebipilt.png" width="128" height="56">
        </div>
            <ul >
                <li><a href="#">Beginning</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">Statistics</a></li>
            </ul>

            <ul >
                <li><a href="#">Objectives</a></li>
                <li><a  href="#">Contact</a></li>
            </ul>   
    </nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
    <section >      
        <div >
            <div >
                <h1>Tere tulemast minu lehele!</h1>
                <p>siia tuleb veel midagi lahedat veel ei tea</p>
            </div>
            <div >
                <img src="./12345.jpg" width="500" height="300">
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <section >
        <div >
            <h1><mark>Veidi</mark> minust</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar{
    background: #cbcca3;
    position: fixed;
    width: 100%;
    padding: 15px 0;
    display: flex;
}
.home{
    background: url("./sigma.gif") no-repeat center;
    background-size: cover;
    height: 100vh;
}

.logo {
    float: left;
    line-height: 70px;
    margin-left: 30px;
    margin-right: 20px;
}
.menu{
    text-align: center;
    padding: 0;
    margin: 0;
    justify-content: space-between;
}

.menu2{
    padding: 0;
    margin: 0px 30px 0px 0px;
    list-style-type: none;
    text-align: center;
}

.navbar .menu li{
    display: inline-block;
    list-style-type: none;
    margin: 0px 20px 0px 20px;
}

.navbar .menu li a{
    font-size: 17px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;

}
.navbar .menu2 li{
    display: inline-block;
    margin: 0px 20px 0px 20px;
}
.navbar .menu2 li a{
    font-size: 17px;
    text-transform: uppercase;
    line-height: 70px;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
}

a.special,a:hover{
    background-color: paleturquoise;
    transition: .5s;
}


p{
    color: floralwhite;
    
}

.rida{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tekstall{
    flex-basis: auto;
    min-width: 300px;
    margin-left: 20px;
    padding-left: 30px;

}

.piltnext{
    max-width: 100%;
    padding: 20px;
    height: auto;
    margin-top: 0px;
}

CodePudding user response：

Welcome to stackoverflow. Your css needs some tweaking. try this (note vertical-align and line-height):

    .navbar .menu li a{
    font-size: 17px;
    line-height: 56px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

CodePudding user response：

Currently I'm working in laptop so my screen isn't big. But, I made some adjustments to your code and I think it's what you want.

You just need to define the width values for everything and make sure it all works in mobile to.

Regards

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar {
    background: #cbcca3;
    position: fixed;
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home {
    background: url("./sigma.gif") no-repeat center;
    background-size: cover;
    height: 100vh;
}

.logo {
    line-height: 70px;
    margin-left: 30px;
    margin-right: 20px;
    max-width: 20px;
  }
    
.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
}

.menu a {
  margin: 0 5px;
  font-size: 17px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
}

.menu2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20px;
}

.menu2 a {
  margin: 0 5px;
  font-size: 17px;
    text-transform: uppercase;
    line-height: 70px;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
}


a.special,a:hover{
    background-color: paleturquoise;
    transition: .5s;
}


p{
    color: floralwhite;
    
}

.rida{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

<nav >

        <div >
            <img src="./veebipilt.png" width="128" height="56">
        </div>
        
        <div >
          <div><a href="#">Beginning</a></div>
          <div><a href="#">About me</a></div>
          <div><a href="#">Statistics</a></div>
        </div>
        
        <div >
            <div><a href="#">Objectives</a></div>
            <div><a  href="#">Contact</a></div>
        </div>

    </nav>

CodePudding user response：

I am not entirely clear what you asking for but to create a truly centered Navbar, with variable-length left and right-aligned items, CSS Flexbox can be used. My Codepen implementation (of the original idea from Keep the middle item centered when side items have different widths) could be modified for a Navbar: https://codepen.io/sam-miller-the-flexboxer/pen/OJQoGGq?editors=1100

The centerline class and div add a central divider to check the alignment of the center div in this example.

CSS:

.centerline {
    position: fixed;
    top: 0;
    left: 50%;
    width: 10px;
    height: 100%;
    background: black;
    transform: translateX(-50%);
    opacity: 0.5;
    z-index: 1
}

.parent {
    display: flex;
}

.left,
.right {
    background-color: red;
    flex: 1 1 0%;
    overflow: auto;
}

.right {
    text-align: right;
}

.center {
    background-color: green;
}

Html:

<div ></div>
<div >
    <div >
        short text.
    </div>
    <div >
        I'm in the center.
    </div>
    <div >
        Very loooooooong text.
    </div>
</div>

For more ideas regarding Bootstrap see:

https://github.com/twbs/bootstrap/discussions/36486

https://github.com/twbs/bootstrap/pull/36523/commits/fca49e8ee6b4d768d0ec144fb3b73ac2c5ff3cc0

Bootstrap Navbar 4 code examples (some of the classes would have to be updated for Boostrap 5): https://codepen.io/yesiamrocks/pen/MVOWXZ