CODEWITHSUNDEEP
htmlcss
Sianna Zewdie
Sianna Zewdie

Reputation: 89

How can I apply padding to this?

So, I'm making a website and in the navbar, I floated some of the links to the right. However, when I do this, the links leave the vertical center and drop downwards. When I apply padding though, nothing happens. I know there are other versions of this question on Stack Overflow, but I've tried the answers and they don't work. Here's my code

/* 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%;
  box-shadow: 5px 10px 8px #888888;
}

.leftside {}

.rightside {
  float: right;
}

.options {
  text-decoration: none;
  margin-bottom: 20%;
}

.linkhome {
  text-decoration: none;
  color: var(--aa-color);
  margin-right: 0%;
  margin-bottom: 20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Example | 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="linkfood">Our Food</a>
          <a href="#" class="linkculture">Culture</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->
</body>

</html>

Any help is greatly appreciated

Thanks!

Upvotes: 1

Views: 48

Answers (1)

Dan Mullin
Dan Mullin

Reputation: 4415

Make your .navbar-wrapper a flexbox.

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

Upvotes: 2

Related Questions