CODEWITHSUNDEEP
htmlcss
Sianna Zewdie
Sianna Zewdie

Reputation: 89

How to force div contents into alignment?

I'm building a webpage and I'm working on the navbar. Everything has been going well (mostly) until now. For some reason, the contents don't line up - there seems to be something blocking it on the right. How do I force them into alignment? Here's my code:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Addis Abeba | Home</title>
        <link rel="stylesheet" href="/css/index.css">
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <!-- Start Navbar -->
        <nav>
            <div class="navbar-wrapper">
                <div class="leftside">

                </div>
                <div class="rightside">
                    <div class="options">
                        <a href="#" class="linkhome">Home</a>
                        <a href="#" class="linkwork">Our Work</a>
                        <a href="#" class="linkabout">About Us</a>
                        <a href="#" class="linkcomunnity">Our Community</a>
                        <a href="#" class="linkculture">Culture</a>
                    </div>
                </div>
            </div>
        </nav>
        <!-- End Navbar -->
    </body>
</html>

CSS

/* Start Variables */
:root{
    --aa-color: #57C324;
}
/* End Variables */

* {
  box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Start Navbar */

.navbar-wrapper{
    width: 100%;
  padding: 2% 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
    box-shadow: 5px 10px 8px #888888;
}

.leftside{

}

.rightside{
    float: right;
}

.options{
    text-decoration: none;
}

.linkhome{
    font-size: 150%;
    text-decoration: none;
    color: var(--aa-color);
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkwork{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkabout{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkcommunity{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkculture{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

/* End Navbar */

Upvotes: 2

Views: 72

Answers (3)

user14126061
user14126061

Reputation:

I would suggest doing something like this:

/* Start Variables */
:root{
    --aa-color: #57C324;
}
/* End Variables */

* {
  box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Start Navbar */

.navbar-wrapper{
    width: 100%;
  padding: 2% 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
    box-shadow: 5px 10px 8px #888888;
}

.leftside{
    float: left;
    width:50%;
}

.rightside{
    float: right;
    width:50%;
}

.options{
    text-decoration: none;
}

.linkhome{
    font-size: 150%;
    text-decoration: none;
    color: var(--aa-color);
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkwork{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkabout{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkcommunity{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkculture{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

/* End Navbar */
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Addis Abeba | Home</title>
        <link rel="stylesheet" href="/css/index.css">
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <!-- Start Navbar -->
        <nav>
            <div class="navbar-wrapper">
                <div class="leftside">

                </div>
                <div class="rightside">
                    <div class="options">
                        <a href="#" class="linkhome">Home</a>
                        <a href="#" class="linkwork">Our Work</a>
                        <a href="#" class="linkabout">About Us</a>
                        <a href="#" class="linkcommunity">Our Community</a>
                        <a href="#" class="linkculture">Culture</a>
                    </div>
                </div>
            </div>
        </nav>
        <!-- End Navbar -->
    </body>
</html>

Upvotes: 3

Warden330
Warden330

Reputation: 1042

I would probably do it like this, it's a lot of single points for a vertical Selection tho

/* Start Variables */
:root{
    --aa-color: #57C324;
}
/* End Variables */

* {
  box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Start Navbar */

.navbar-wrapper{
    width: 100%;
  padding: 2% 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
    box-shadow: 5px 10px 8px #888888;
}

.leftside{
    float: left;
    width:50%;
}

.rightside{
    width:50%;
}

.options{
    text-decoration: none;
    display: flex;
    flex-flow: column wrap;
    align-content: flex-end;
    
}

.linkhome{
    font-size: 150%;
    text-decoration: none;
    color: var(--aa-color);
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkwork{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkabout{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkcommunity{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkculture{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

/* End Navbar */
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Addis Abeba | Home</title>
        <link rel="stylesheet" href="/css/index.css">
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <!-- Start Navbar -->
        <nav>
            <div class="navbar-wrapper">
                <div class="leftside">

                </div>
                <div class="rightside">
                    <div class="options">
                        <a href="#" class="linkhome">Home</a>
                        <a href="#" class="linkwork">Our Work</a>
                        <a href="#" class="linkabout">About Us</a>
                        <a href="#" class="linkcommunity">Our Community</a>
                        <a href="#" class="linkculture">Culture</a>
                    </div>
                </div>
            </div>
        </nav>
        <!-- End Navbar -->
    </body>
</html>

Upvotes: 2

Tsubasa
Tsubasa

Reputation: 1429

Try this one.

/* Start Variables */
:root{
    --aa-color: #57C324;
}
/* End Variables */

* {
  box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Start Navbar */

.navbar-wrapper{
    width: 100%;
    padding: 2% 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 5px 10px 8px #888888;
}

.navbar-wrapper a{
    text-decoration: none;
}

.linkhome{
    font-size: 150%;
    text-decoration: none;
    color: var(--aa-color);
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkwork{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkabout{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkcommunity{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

.linkculture{
    font-size: 150%;
    text-decoration: none;
    color: black;
    margin-right: 0%;
    margin-left: 2%;
    display: inline-block;
}

/* End Navbar */
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Addis Abeba | Home</title>
        <link rel="stylesheet" href="/css/index.css">
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <!-- Start Navbar -->
        <nav>
            <div class="navbar-wrapper">
                <a href="#" class="linkhome">Home</a>
                <a href="#" class="linkwork">Our Work</a>
                <a href="#" class="linkabout">About Us</a>
                <a href="#" class="linkcommunity">Our Community</a>
                <a href="#" class="linkculture">Culture</a>
            </div>
        </nav>
        <!-- End Navbar -->
    </body>
</html>

Here the idea is that declaring flex to a particular div, the immediate children becomes the flex-items.

Upvotes: 2

Related Questions