0

I am trying to create a simple navbar using just html and css. I am trying to position the text in the anchor tags for my navbar so that they are aligned horizontally with the logo image on the left. I have tried to use padding and margin to move the content of the anchors up and down but that doesn't seem to do anything. Any advice would be great.

Index.html

nav a {
  /*color: white;*/
  text-decoration: none;
  font-family: SoDoSans, Helvetica, sans-serif;
  font-weight: 700;
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

nav a:hover {
  color: turquoise;
}

.container img {
  height: 40px;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  margin-left: 250px;
}

.container {
  height: 70px;
}
<div class="container">
  <nav>
    <a href="#"><img id='logo' src="./images/logo.png"></a>
    <a href="#">MENU</a>
    <a href="#">REWARDS</a>
    <a href="#">GIFT CARDS</a>
  </nav>
</div>
Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252
cloudiebro
  • 135
  • 3
  • 13
  • Please, check **[this answer](https://stackoverflow.com/a/71076750/4512005)**. Does it suit your needs? – Razvan Zamfir Feb 11 '22 at 17:39
  • The answer you provided did not work, i ended up having to do the following to get it to work however i don't understand why it works. https://jsfiddle.net/hy9b78wn/ – cloudiebro Mar 03 '22 at 23:12

0 Answers0