https://codepen.io/jebbss/pen/ZvvoNe
In the codepen the words ‘Image search’ appear in one line, which is good. When I serve it via node/express on my local machine, ‘Image’ & ‘search’ appear on two different lines. Does anybody have any ideas on why this is?
html
<div class="center">
<div class="searchForm">
<h3>Image search</h3>
<form action="/search" method="post">
<textarea class="searchField" id="search" name="query" placeholder="What type of images are you looking for?"></textarea>
<input class="searchButton" type="submit" value="Search" />
</form>
</div>
</div>
CSS
.center {
text-align: center;
}
.searchForm {
display: grid;
grid-template-columns: 1;
grid-template-rows: repeat(2,auto);
justify-items: center;
width:100px;
margin: auto;
}