Не получается вставить картинку в виджете html блок

В виджет html блок пишу этот код:

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* центрируем основной контейнер */
}
img {
width: 100%; /* ширина картинки */
height: auto; /* высота картинки */
}
<div class="container">
<img src="http://delatdelo.com/wp-content/uploads/2018/07/4.3-2.jpg" width="960" height="640" />
</div>

А так выводит на сайте.

А так выводит на сайте.

Браузер просто "выводит" картинку с "довесками", т. к. не описан сам контейнер как таковой.
При использовании bootstrap-а будет иной случай.

А так выводит на сайте.

Браузер просто "выводит" картинку с "довесками", т. к. не описан сам контейнер как таковой.
При использовании bootstrap-а будет иной случай.

А как это сделать? Нужно просто вставить картинку над списком записей и чтоб картинка была адаптивной.

@Milyana, вы забыли обернуть в <style> ваши стили

А как это сделать?

Для конкретного размера контейнера можно описать его
в theme-layout.css по примеру описания
#layout header{
height: 50px;
....................
… }
с использованием медиа запросов.
Успехов.

@Milyana, вы забыли обернуть в ваши стили

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* центрируем основной контейнер */
}
img {
width: 100%; /* ширина картинки */
height: auto; /* высота картинки */
}
 
 
 

Спасибо большое, как всегда выручаете:)