My header functions flawlessly in its own HTML file, and the product details page is also perfectly fine on its own. However, when I combine the two by adding the header to the product page, it completely messes up. It pushes the header out of place, causing part of the product details to appear on the right side of the header.
Even after using inspect element, I couldn't find any padding or margins that could be causing this issue. Adding margin or padding manually also didn't resolve the problem.
I suspect that there might be an issue with the product page itself because inspect element highlighted that section of the page during troubleshooting.
Any assistance would be greatly appreciated!
Some of the product HTML (https://i.sstatic.net/tsGDT.png)](https://i.sstatic.net/tsGDT.png)
PRODUCT HTML:
@import url(https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;800;900&display=swap);
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
... (CSS code continues)
</body>
</html>PRODUCT CSS:
Product page on its own (https://i.sstatic.net/Vnd9J.png)](https://i.sstatic.net/Vnd9J.png)
Header on its own (https://i.sstatic.net/eQE3g.png)](https://i.sstatic.net/eQE3g.png)
The combination of both the header and the product details (https://i.sstatic.net/9y2t1.png)](https://i.sstatic.net/9y2t1.png)
I attempted to find any disruptive padding and margins.
In addition, I tried adding padding and margins to the smallcontainer and row in the CSS.