Html Question posted in
Some basic documentation can be found here.

Html – How can I make the image on the right move a little to the left without moving the rest of the header?

im making a header that looks like this
header screenshot

and as you can see, the image in the right is very far to the right and i do not want that, i want it to be a little bit more to the left, and i tried to use a margin-right 5px but when i do that, the links in the center of the header moves to the left when i do the margin right thing on the right image

here is the html and css code

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

header {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid;
}

.left_header img {
  width: 90px;
}

.main_links {
  width: 400px;
}

.main_links ul {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
}

.main_links a {
  text-decoration: none;
  color: pink;
}

.main_links a:hover {
  color: black;
}

.right_header {}

.right_header img {
  width: 30px;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>karen</title>
</head>

<body>
  <header>
    <div class="left_header">
      <a href=""><img src="logo-waveform-svgrepo-com.svg" alt="" /></a>
    </div>
    <nav class="main_links">
      <ul>
        <li><a href="">karen</a></li>
        <li><a href="">asdfasdsasadsf</a></li>
        <li><a href="">adfadsfasfasfadsfad</a></li>
        <li><a href="">adfafafasfads</a></li>
      </ul>
    </nav>
    <div class="right_header">
      <img src="/icons8-menú.svg" alt="" />
    </div>
  </header>
  <main></main>
  <footer></footer>
</body>

</html>

and as you can see, the image in the right is very far to the right and i do not want that, i want it to

Tags:

2

Answers


  1. 0

    You can add padding to your header tag selector:

    header {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid;
  padding: 0 10px; /*0: top and bottom, 10px: left and right*/
}

    If you just need padding on the right:

    header {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid;
  padding-right: 10px;
}
    Login or Signup to reply.
  2. 0

    Maybe you can add padding: 0 20px; to keep elements away from edges.
    And then in the .main_links use margin_right.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search