CSS common mistakes and how to fix them

in this little tutorial, i will show you some of the most common mistakes in CSS and how to fix them.

1. Full-width element and padding

i don't know if you have you tried to make a full-width menu for example and you added to that menu padding of 15px, you will remark that the menu will be larger then the screen, the explication is that you added extra width to your element.

imagine that your browser screen has a width of 1080px so if your element has a 100% width then his final width will be 1080px, but when you add padding:30px then it's like you added 30px to the left and 30px to the right and the final width will be 1080+60 = 1140px and it's normal that the element is larger than the screen.

to fix that there are two solutions:

the first one is to add padding only for the top and the bottom of the element with " padding:15px 0; ".

the second one is to use calc() function, calc() is a great function that will allow us to make some calculations using CSS and this is really practical when you manipulate relative sizes to use it it's simple

padding:15px;

width:calc(100% - 30px );

for this function, you have to let a space between the two value and the operator or it won't work.

2.alignments of elements and centering them

we use elements alignments regularly to present, for example, the team section or a set of product or our goals but many people face some problem when they want to do such a thing.

Generally, we use float: left to align our divs but personally i used to do this but it's not clean at all.
the best alternative that i propose is to use flex-box
the advantage of flexbox is that it's easy to use and it's responsive and it does not affect other elements like float
let see the code :
<!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="section">

<div class="row">
put what ever you want
</div>

<div class="row">
put what ever you want
</div>

<div class="row">
put what ever you want
</div>
</div>
</body>

</html>

and for the css :
.section{
padding: 15px;
width: calc(100% - 15px);
display: flex;
flex-direction: row;
}
.box{
width: 33%;
height: 100%;
}

as you can see i changed the display property to flex and i precise the direction ( row or column ) then i put the width of elements.

3.position

i think that positioning is the common and most complicated part in css for beginners so i want to correct some point for all beginners.

the origin of the elements is the top-left point

so when you will put the top, left, bottom and right make sure that you are conscient that you are not positioning your element from its center.

the second thing is the absolute and relative property

relative it means we will be positioning our divs relative to its position so the origin is the top left point as i said

absolute it means we will be positioning ours divs relative to the parent element id it has relative property , i will make a tutorial about postion.

i hope you found this articel helpful you can ask in the comment about some problem that you often face and i will try to help you

CSS common mistakes and how to fix them