Everything on the page is completely responsive, but all that bulge remains on the side of the page and I have no idea how to remove it, previously I enabled the overflow-x: hidden function so that it does not slide horizontally to the right, it worked but as soon as I uploaded it and tried it from my cell phone it did not work, the page could slide horizontally to the right, to which, I was trying to remove that empty space on the side so as not to have to disable horizontal scrolling (since it does not work for mobile devices). Please, ignore the redundancy and infectiousness in all the code, I started to learn3 weeks ago and I still have a lot to understand, I will thank you forever for your help! I will be attentive, greetings and thanks in advance! Here is the Github link, the html is under the name of “index” and the css is under the name of “EstiloNuevo”:
https://github.com/mate1891927/Nueva-pagina
In the same way, the page is uploaded on the Github server, so if you want to look at the error that I am telling you about in real time, here is the link:
Ok you are doing well for only 3 weeks but there are a number of major problems.
I’m just going offline until tomorrow but as a start you can remove anything that has a 2000px width or a 5000px width from your code as that is nonsense and not helping at all.
Also remove your negative margins of -20px which is causing problems and just hides the fact that you put a height on the header section when you didn’t need to. Also stop putting 100% width on static elements as they don’t need a width at all and will expand automatically to fill the available area.
If you want to limit your page width to 2000px wide then you need to place a page wrapper around the whole page content and set a max-width of 2000px and use margin:auto to centre it. (Although 2000px is a strange width to want anyway.)
The above should take care of the space at the side which was caused by you setting the 2000px when the parent only had 100% width. That means your 2000px would poke out the side on any screen smaller than 2000px and you would have to scroll to see it.
Luckily these days most devices will ignore the user scalable attribute anyway as it is bad for accessibility.
I see a lot of magic numbers in the CSS where you have placed things specifically with no regard to other content on the page rather than allowing a more logical approach of elements. For instance in your header you have two images placed absolutely on either side of the menu text but they never match up or keep track with the text so look odd or overlap. The images should have been background images anyway and applied to the same element as the text so you can control all together without explicitly placing each element.
If an image is used for decoration then it should be placed in the background of an element. If the image is actual content that adds meaning to the page then it should be an html img tag with suitable alt attribute text (not empty).
The header section of your page is made up of 3 separate header elements. Semantically they are just one header and should be wrapped in a single header tag. You can divide the code in the header using divs as required but you actually only have one header. Be careful with duplicating code for different screen widths as usually you would want to manipulate the same elements into a better display rather than switching one whole section on or off depending on screen width. There is a place for that kind of behaviour but should be used sparingly when there is no alternative.
You wrapped the whole page in a section tag and the whole page can’t be a section because its the whole page Use a div not a section element (generally). Generally a section must have an immediate heading tag at the correct level to be semantically correct. I also note you have a section and called it .main when you could have used the main element instead
However as you have only been doing this for 3 weeks you have made a good start and are bound to fall into the common traps because after all that’s how you learn
