-1

this is a pic of the problem look at the margin at around the div

the div at the top of the page has a margin on it even though i tried to set the margin to 0 and the padding to 0 it still did not work when I put !important after them.

`

<body>
    <div class="logobackground">
    <div class="logo2">
    <div class="logo">
    <img src="../images/fish.png" alt="The Family Cooking logo" class="logoimg">
    <h1 class="logotext">Example text</h1>
      </div>
      </div>
  </div>
  </body>

`

`THE CSS`

`

.logoimg {
  widt: 320px;
  height: 100px;  
  padding-right: 20px;
  padding-top: 3.5px;
}
.logotext{
  font-family: 'flower', cursive;
  
padding-bottom: 1.5px;  
  font-weight: 6;
  color: #c9c042;
  border-radius-bottom: 10px;
  font-size: 90px;
}

.logo{
display: flex;
align-items: center; 
  margin: 0 auto;
 margin-left: auto;
  margin-right: auto;
  padding: 0 auto;
 width: 100%; 
}  
.logo2 {
 margin: 0 auto;
  padding: 0 auto;
  background-color: #f5f5f5;
  background-size: cover;
  width: 100%;
  
  
}

`

thewebdeloper
  • 1
  • 1

2 Answers2

1

My first recommendation would be to use the inspector tools on your browser. Learn more about this here: https://blog.hubspot.com/website/how-to-inspect

You can then find which element has padding, or margin, by looking at the box model, which is typically found at the bottom of the inspector tools.

To remove the main div's margin, you can write this:

.logobackground{
margin: 0;
}

If you still see the margin, then it could be the body element. Write:

body {
    margin: 0;
    }
  1. More about the box model:https://www.w3schools.com/css/css_boxmodel.asp
  2. YouTube tutorial to inspect elements: https://www.youtube.com/watch?v=1l4xz1QQhew
  3. Learn about CSS margin: https://www.w3schools.com/css/css_margin.asp
0

I'd suggest debugging on a browser and viewing the elements css. That should lead to the exact element that is causing that padding.

Ronan
  • 27
  • 9