Text alignment works well, however, inline-block elements behave like inline elements but can also have a specified width and height. If no width is assigned, the div will be as wide as the text.
To simplify, remove the inline-block property as the div element already has a display block.
<!DOCTYPE html>
<html>
<head>
<title>Wheat and Barley</title>
</head>
<body style="font-family:Helvetica;">
<div><h1 style="font-weight:bold; text-align:center; background-color:blue;">Wheat</h1></div>
<p>Wheat is a cereal grain, originally from the Levant region of the Near East but now cultivated worldwide. In 2013, world production of wheat was 713 million tons, making it the third most-produced cereal after maize (1,016 million tons) and rice (745 million tons). Wheat was the second most-produced cereal in 2009; world production in that year was 682 million tons, after maize, and with rice as a close third.</p>
<p>This grain is grown on more land area than any other commercial food. World trade in wheat is greater than for all other crops combined. Globally, wheat is the leading source of vegetable protein in human food, having a higher protein content than other major cereals, maize (corn) or rice. In terms of total production tonnages used for food, it is currently second to rice as the main human food crop and ahead of maize, after allowing for maize's more extensive use in animal feeds. The archaeological record suggests that this first occurred in the regions known as the Fertile Crescent.</p>
</body>
</html>
If possible, avoid using inline CSS and instead use an external file. Visit this link for reference: http://www.w3schools.com/css/css_howto.asp