Issue
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%;
}
`
Solution
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;
}
- More about the box model:https://www.w3schools.com/css/css_boxmodel.asp
- YouTube tutorial to inspect elements: https://www.youtube.com/watch?v=1l4xz1QQhew
- Learn about CSS margin: https://www.w3schools.com/css/css_margin.asp
Answered By - LukeP
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.