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

No padding or margin is working on the right side of the page – Html

No padding or margin is working on the right side and I’m not sure if the problem is with the unit vw but changing it didn’t work

I’m hoping if you can try the code yourself and see if you can solve it for me being able to have padding or a margin on the right side of the page.

* {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

header {
  width: 100vw;
  background-color: brown;
  padding: 10px;
}

.logo-name-logo {
  background-color: white;
  display: flex;
  width: 100%;
  margin: 10px;
}

.flexitem {
  border: 3px solid yellow;
  background-color: aquamarine;
  width: 200px;
}

.logo-1 {
  min-height: 100px;
}

.name {
  min-height: 100px;
}

.logo-2 {
  min-height: 100px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Meshal</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <header>
    <div class="logo-name-logo">
      <div class="flexitem logo-1"></div>
      <div class="flexitem name"></div>
      <div class="flexitem logo-2"></div>
    </div>
    <div class="job-title"></div>
  </header>

</body>

</html>
Tags:

3

Answers


  1. 0

    Try with important in th css !
    Like this :
    margin : 10px important;

    Login or Signup to reply.
  2. 0 
    * {
    padding: 0;
    margin: 0;
    /* overflow: hidden; */
}

header {
    width: 100%;
    background-color: brown;
    padding: 15px;
    box-sizing: border-box;   /* Added to manage the box size automatically*/
}

.logo-name-logo {
    background-color: white;
    display: flex;
    width: 100%;
    /* margin: 10px; */
}

.flexitem {
    border: 3px solid yellow;
    background-color: aquamarine;
    width: 200px;
}

.logo-1 {
    min-height: 100px;

}

.name {
    min-height: 100px;

}

.logo-2 {
    min-height: 100px;

}
    Login or Signup to reply.
  3. 0

    It’s a bit unclear exactly what you want this to look like but my best guess is something like the below snippet. I don’t think you need the width: 100vw or width: 100% rules. Block elements are going to take the full horizontal width naturally and forcing them to 100% in this case is probably causing your issue.

    Also, if your goal is to distribute flex items equally, please note the flex: 1 1 auto rules instead of setting a static pixel width.

    * {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

header {
  background-color: brown;
  padding: 10px;
}

.logo-name-logo {
  background-color: white;
  display: flex;
  margin: 10px;
}

.flexitem {
  border: 3px solid yellow;
  background-color: aquamarine;
  flex: 1 1 auto;
}

.logo-1 {
  min-height: 100px;
}

.name {
  min-height: 100px;
}

.logo-2 {
  min-height: 100px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Meshal</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <header>
    <div class="logo-name-logo">
      <div class="flexitem logo-1"></div>
      <div class="flexitem name"></div>
      <div class="flexitem logo-2"></div>
    </div>
    <div class="job-title"></div>
  </header>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search