Search code examples
htmlcssborder

How to remove left white border-color of my website

enter image description here

You can see a white border https://www.bdevg.com. See the border on the left side, it is not on the right side.

To create the wave animation I used a background image(bottom wave of top section) and it has a background color.

The whole section has the following style.

paddingTop:"30px",
    position: 'relative',
    width: '100%',
    height: '60vh',
    background: '#556cd6', //#3544ff, #35aaff
    overflow: 'hidden',
    margin:"0px"

wave section has the following style

height:"100px",
    width:"100%",
    position:"absolute",
    bottom:"0",
    left:"0",
    overflow:"hidden",
    backgroundImage:`url(/images/layout/wave.png)`,
    backgroundSize:"1000px 100px"

I tried to check padding or margin applied by other siblings and parent elements. But, i didn't found any way to fix it.

Solution

  • When you click on your navigation bar(expand the burger first) and inspect, it has a border-right property set

    .MuiDrawer-paperAnchorDockedLeft {
   border-right: 1px solid rgba(0, 0, 0, 0.12); }

    Simply remove that property and the white border will vanish.