I am an inexperienced programmer creating a temperature converter website using HTML and CSS. I am using a container to display the text 'Temperature Converter', which I want to be shown at the top and centre of the webpage.I have come across an issue early in development whilst getting to grips with flexboxes. When using justify-content and align-self within the id of the container, these properties apply to the text within the container instead of the container itself, moving the text to the top and centre of the container.
CSS code:
div { display: flex;}#title { align-self: flex-start; justify-content: center; background-color: lightgray; font: arial; text-align: center; height: 100px; max-width: 400px;}HTML code:
<!DOCTYPE html><html><head><title>placeholder</title><link rel="stylesheet" href="temperatureConverter.css"></head><body><div id="title">Temperature Converter</div><br></body></html>I have tried a few different combinations of flex properties, including justify-self and align-items, as well as moving these to the div portion of the CSS code, none of which are of any help. Similar questions asked here that I have found are not applicable to my problem.I imagine I will have missed something obvious due to my inexperience, but help with moving the container instead of the text would be appreciated.