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

Html – Padding is getting overflow

The padding size isn’t aligning properly with my navbar. When I attempt to adjust the padding size, it ends up shifting away from the navbar.
This is how I want when I hover on it Ref: Up image
But I get like this Ref: Down image
This is how my css looks

@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@100&family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@100&family=Roboto&family=Unbounded:wght@200;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@100&family=Khand&family=Roboto&family=Unbounded:wght@200;700&display=swap");
* {
  margin: 0px;
  padding: 0px;
}
header {
  background-color: rgba(46, 49, 56, 1);
  width: 1920px;
  height: 107px;
  flex-shrink: 0;
  background-size: cover;
}
ul {
  float: right;
  list-style-type: none;
  padding: 53.4px 23.6px;
}
li {
  display: inline-block;
}

li a {
  color: #fff;
  text-align: center;
  font-family: "Alumni Sans", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.21px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 30.4px;
}
li a:hover {
  background-color: #eb4343;
  color: #fff;
}
.logo img {
  padding: 49px 200px;
  width: 49px;
  height: 40px;
  flex-shrink: 0;
  border: top 50px;
  border: right 1671px;
  border: bottom 17px;
  border-left: 200px;
}
body {
  background-image: url("Rectangle10.jpg");
  width: 1930px;
  height: 1091px;
  flex-shrink: 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.vl {
  border-left: 1px dotted red;
  height: 973px;
  margin: 118px -10px 1706px 224px;
}
.text1 a {
  width: 1596px;
  height: 374px;
  flex-shrink: 0;
}
.text1 a {
  color: #eb4343;
  font-family: "Unbounded", cursive;
  font-size: 150px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -9px;
  text-transform: uppercase;
  padding-left: 253px 10px 464px 324px;
  margin: ;
}
.text2 a {
  width: 365px;
  height: 130px;
  flex-shrink: 0;
}
.text2 a {
  color: #e7e7e7;
  font-family: "Khand", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%; /* 37.4px */
}

Image

The image up is of figma

I tried changing the padding size

Tags:

2

Answers


  1. 0

    If I understood correctly, it seems that the issue might be with the padding on .logo img, where you have padding of 200px on each side. Try reducing that padding.

    And put something like this padding: 49px 30px(<-this value is a problem) 49px 200px;

    Login or Signup to reply.
  2. 0

    I believe if you add the CSS "Top" property to your li a:hover class, you can resolve your issue.

    Here is a great source for researching CSS Top property: https://www.w3schools.com/cssref/pr_pos_top.php

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

Back To Top
Search