I am sharing the codepen.io html script. However, codepen.io has messed up the entire layout of my webpage. If I normally run the html script in my browser the blue bar that you see at the top of my webpage does not reach the right hand edge of the browser. There is still the black background seen after the right most edge of the blue bar.
[link: https://codepen.io/psomdeb25/pen/bajYvd]
How could I correct it?
Another question I had:
When I resize my browser window, the size of the Musk image remains the same. It does not resize along with the browser window size.
Can you help me with these questions?
Thank you.
Okay, I have done as you mentioned. But, I am not sure how I could adjust the size of the Musk image as I resize my browser window. I tried some CSS styles that I found on the web. I am assuming, maybe the bootstrapping is obstructing my center-aligning but I wonder why the image is not resizing.
Any ideas?
Do not use inline-styling, it will become more painful as you progress, please avoid it for major cause.
Now into your project,
- Remove the height prop from
#header
- Remove the
width: 20% from your .title
- Remove the height and width prop from
#img-div
- Give your image a 100% width
height of 20px makes the div to shrink to only 20px, be aware of what styles you apply, once you have set the col do not style it, only style the elements inside it.
For the title, you set a width of 20% and have set the font-size to a large value in inline-style…? Are you sure you were aware of what you did.? It will span only to a width of 20% and contents will go to next line if it doesn’t have space.