Margin right in my mobile website doesn't want to disappear

HTML-CSS
1

Good morning,
I have a right margin problem that won’t go away. In mobile version, I have the horizontal bar that appears. I checked my HTML code but nothing helps it won’t go away. Do you have a solution ? here is my css code:

@media (max-width: 767px) {
main {
    width: 88%;
}
header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 1250px;
    width: 95%;
    margin: 0 0 0 -100px;
}
img {
    object-fit: cover;
}
.moi {
    z-index: 1;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    margin: 80px 0 0 0;
}
.button {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    border: #ff0066 1px solid;
    border-radius: 5px;
    width: 100%;
    height: 150px;
    color : #ff0066;
    margin: 0 0 0 50px;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 60px;
    padding: 100px;
}
.button:hover {
    background-color: #ff0066;
    color: #fff;
    border: #ff0066 1px solid;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
button {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    gap : 10px;
    background-color: #000000;
    border: #ff0066 1px solid;
    border-radius: 5px;
    width: 100%;
    height: 150px;
    color : #ff0066;
    margin: 0 0 0 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 60px;
}
button:hover {
    background-color: #ff0066;
    color: #fff;
    border: #ff0066 1px solid;
}
.contact {
    display: flex;
    gap: 20px;
}
H1 {
    font-size: 70px;
    font-weight: 700;
    display: flex;
    margin: 0 0 20px 50px;
    text-align: justify;
    font-family: 'Roboto', sans-serif;
}
.heading {
    font-size: 50px;
    font-weight: 700;
    display: flex;
    margin: 0 0 20px 50px;
    text-align: justify;
    font-family: 'Roboto', sans-serif;
}
H2 {
    display: flex;
    font-size: 115px;
    font-weight: 900;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    width: 55%;
}
H3 {
    font-size: 38px;
    font-weight: 400;
    margin: 0 0 0 50px;
    display: flex;
    text-align: justify;
    font-family: 'Roboto', sans-serif;
    width: 50%;
}
.mainbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 500;
    text-align: justify;
    margin: 0 0 0 50px;
    padding: 30px;
}
.expe {
    color: #000000;
    font-weight: 700;
    font-size: 130px;
    border-radius: 100%;
    padding: 30px;
    margin: 50px 0 0 50px;
    width: 40%;
}
.beginner {
    color: #ff0066;
    font-weight: 700;
    font-size: 130px;
    border-radius: 100%;
    display: flex;
    margin: 0px 0 0 0px;
    width: 40%;
    padding: 30px;
}
.beginners {
    visibility: hidden;
    color: #000000;
    font-weight: 700;
    font-size: 90px;
    border-radius: 100%;
    display: flex;
    margin: -600px 0 0 850px;
    width: 40%;
}
.help {
    visibility: hidden;
    margin: 0 0 20px 300px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-color: #ffffff;
    border: #ff0066 3px solid;
    border-radius: 5px;
    color : #000000;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 50px;
    width: 650px;
    height: 150px;
}
.help:hover {
    background-color: rgb(194, 191, 191);   
}
.lire {
    cursor: pointer;
    background-color: #ff0066;
    border: #ff0066 1px solid;
    border-radius: 5px;
    width: 450px;
    height: 150px;
    color : #ffffff;
    margin: 30px 0 0 250px;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
}
.lire:hover {
    background-color: #000000;
    color: #ff0066;
    border: #ff0066 1px solid;
}
.aside {
    height: 900px;
    width: 100%;
    background-color: #000000;
    float: left;
    margin: 50px 0 100px 0;
}
.metal {
    height: 880px;
    width: 100%;
}
.portfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 0 -65px;
    width: 100%;
    height: 100%;
}
.html {
    font-size: 55px;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}
.ido {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: #000000;
    font-size: 130px;
    font-weight: 900;
    margin: 0 0 0 50px;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    width: 40%;
}
.design {
    width: 123%;
    position: relative;
    height: 700px;
    left: -100px;
}
.responsive {
    width: 123%;
    position: relative;
    top: 500px;
    left: -450px;
    height: 600px;
}
.office {
    width: 123%;
    position: relative;
    top: 930px;
    left: -800px;
    height: 600px;
}
.skills {
    width: 1050px;
    height: 400px;
    z-index: -1;
    display: flex;
    flex-direction: column;
}
.design1 {
    font-size: 75px;
    font-weight: 800;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    z-index: 1;
    position: relative;
    top: -210px;
    left: 100px;
}
.responsive1 {
    font-size: 70px;
    font-weight: 800;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    z-index: 1;
    position: relative;
    top: -10px;
    left: 480px;
    width: 40%;
}
.office1 {
    font-size: 70px;
    font-weight: 800;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    z-index: 1;
    position: relative;
    top: 520px;
    left: 370px;
    width: 40%;
}
.seo {
    font-size: 20px;
    font-weight: 800;
    font-family: 'Roboto', sans-serif;
    color: #f00000;
    display: flex;
    justify-content: flex-end;
    z-index: 1;
    margin: 30px 0 0 1000px;
}
.footer {
    background-color: #000000;
    height: 2000px;
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    font-family: 'Roboto', sans-serif;
    margin: 0 0 0 -100px;
}
.work {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150px;
    font-weight: 900;
    margin: 0 0 0 0;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    width: 25%;
    color: #ff0066;
    text-align: center;
}
.autodidacte {
    text-align: center;
    width: 50%;
    margin: 50px 0 0 0;
    font-size: 70px;
}
.fa-phone {
    font-size: 80px;
    color: #ff0066;
    display: flex;
    gap: 20px;
    margin: 30px 0 0 0px;
}
.fa-envelope {
    font-size: 80px;
    color: #ff0066;
    display: flex;
    gap: 20px;
    margin: 30px 0 0 0px;
}
.legal {
    font-size: 70px;
    font-weight: 900;
    margin: 30px 0 0 0px;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    width: 55%;
    color: #ff0066;
    text-align: center;
}
.send {
    cursor: pointer;
    background-color: #ff0066;
    border: #ff0066 1px solid;
    border-radius: 5px;
    width: 250px;
    height: 150px;
    color : #ffffff;
    margin: 0 0 0 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
}
.phone {
    font-size: 55px;
    color: #ffffff;
    display: flex;
    gap: 20px;
}
.phone1 a {
    font-size: 55px;
    color: #ffffff;
    display: flex;
    gap: 20px;
}
a {
    text-decoration: none;
    color: #ff0066;
}
a:hover {
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gallery {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 0 1200px 0;
}
.title {
	font-family: 'Roboto Slab', sans-serif;
	font-size: 45px;
	font-weight: 900;
    color: #000000;
    display: flex;
	justify-content: center;
	align-items: center;
	margin: 250px 0 0 150px;
}
.figcaption {
	text-align: justify;
	width: 100%;
	color: white;
}
.Oh {
	height: 670px;
    width: 850%;
    margin: 50px 0px 0 -250px;
}
.titles{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0 100px;
}
.service
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0 0 200px;
}
.travaux {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: #000000;
    font-size: 75px;
    font-weight: 900;
    margin: 1030px 0px 0 0px;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    width: 100%;
}
.print1 {
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
    font-size: 60px;
    color: #ff0066;
    text-align: center;
    margin: 30px 0 0 0px;
    width: 800px;
}
.choice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 0 0 0 0px;
}
.background {
    background-color: #5d5d5d;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 30px -150px 150px 0;
    height: 1500px;
}
.formation p {
    display: none;
}
.formation p.show {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 60px;
    width: 80%;
    padding: 20px;
}
.formation1 p {
    display: none;
    margin: 0;
}
.formation1 p.show {
    display: none;
    height: 450px;
    text-align: justify;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 50px;
    padding: 20px;
}
.circle, .circle1, .circle2, .circle3, .circle4, .circle5 {
    
    background: #ff0066;
    border-radius: 50%;
    width: 350px;
    height: 350px;
    border: 3px solid #000000;
    color: #FFFFFF;
    margin: 50px 15px 50px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.circle:hover, .circle1:hover, .circle2:hover, .circle3:hover, .circle4:hover, .circle5:hover {
    background: #000000;
  }
}
2

Hi mjadia, can you specify which selection you are having the right margin problem, which element or is it the body?

3

the right margin is on the whole document. I give the link of the website :

https://vidalbravojandia.fr/

you have to put in mobile version

4

You have to change some values for particular properties in almost all html elements for the screen size of 768px.

I suppose you want to get something like this:

image
image564×959 120 KB

The only help here is to find out how to use the inspect tool in your browser for finding those elements and change them.

5

I use dev tools for chrome but i find nothing. Nothing runs well. The problem is only with 320px mobile mode view

7

In addition to what @DobarBREND suggested, there is a trailing paragraph closing tag without an opening tag on line 45. Delete it . Use your editor, and using proper indentation, make sure that all elements that should be child of “main” are really inside it.

8

Well, this is your page on the 375px width screen size:

image
image576×944 85.9 KB

Obviously, it doesn’t look good.
You will not get any notification about the look of your page. By using ‘inspect’ tool, you can click on any particular element and see its properties on the left side on the screen. Then, try to change those properties that are behave in unwanted way. When you find them, change the original css code in your file.
If you know all of this mentioned above, disregard it.

9

VBJ

I share an image because i inspect (check) the code but i find nothing

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.